超越“宽度”属性
经典的“之前”和“之后”效应让我们只过渡“ width
”属性来折叠前图像并显示后图像,但这并不意味着我们无法获得一点创意。在下面的示例中,让我们看一下结合“ width
” 转换其他属性的结果,再加上一个不同的属性,看看我们可以在效果之前/之后放置什么类型的旋转:
![]() ![]() | 结合“过渡”“宽度”和“不透明度”div.beforeandafter:hover div.before { 宽度:0; 不透明度:0;} |
![]() ![]() | 同时转换“宽度”和“高度”div.beforeandafter:hover div.before { 宽度:0; 身高:0;} |
![]() ![]() | 转换“高度”属性div.beforeandafter:hover div.before { 身高:0;} |
![]() ![]() | 转换“转换”属性div.beforeandafter:hover div.before { transform:rotate(360deg)translate3D(100%,100%,0)} |
![]() ![]() | 创建翻转卡效果div.beforeandafter {/ *主要容器* / 背景:白色; 边框:1px实心灰色; 显示:块; 宽度:234px; / *主容器的宽度* / 身高:320px; / *主容器高度* / 位置:相对; 观点:1000px; / *值越大,3D效果越不明显* /}div.before,div.after {/ *在主容器内DIV之前和之后* / 身高:100%; 位置:绝对; 左:0; 顶部:0; 宽度:100%; z-index:100; transform-style:preserve-3d; / *将儿童DIV放置在3D空间中* / 过渡:全部轻松进出; / * CSS过渡。* /}div.after { transform:rotateY(-180deg); / *在“DIV之后”旋转-180deg以启动* / z-index:1; / *之后的div-index应小于之前的* /}div.before { 背面 - 可见性:隐藏; / *隐藏“之前”DIV背面* /}div.beforeandafter:hover div.before { 变换:rotateY(180deg)}div.beforeandafter:hover div.after { transform:rotateY(0)} |
正如您所看到的,只需通过调整鼠标滚过前/后容器时修改的CSS属性,我们就可以在原始效果上创建许多变体。最后一个例子超越了深入研究3D变换。
我们可以扩展“之前和之后”效果的另一个领域是使用户能够在同一容器内加载不同的图像集,因此可以方便地比较多组图像。让我们看看如何在下一页上做到这一点。
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69933200/viewspace-2651611/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/69933200/viewspace-2651611/