这是一款使用纯CSS3制作的效果非常炫酷的圆形图片鼠标滑过背景视觉差动画特效。该视觉差特效中,在鼠标滑过圆形图片时,图片中的各层元素以不同的速度开始动画,形成强烈的视觉差效果。
使用方法
HTML结构
该视觉差特效使用的HTML结构为嵌套<div>
的HTML结构。在包裹容器div.page
中,每一个div.content
元素是一个视觉差效果。在它里面是一个用于圆形图片的div.circle
元素。所有的图片都放置在div.circle_inner
中,div.content_shadow
是圆形的阴影效果。
<div class="page"> <div class='content'> <div class='circle'> <div class='circle_title'> <h2>......</h2> <h3>......</h3> </div> <div class='circle_inner'> <div class='circle_inner__layer'> <img src='img/pc1.png'> </div> <div class='circle_inner__layer'> <img src='img/pc3.png'> </div> <div class='circle_inner__layer'> <img src='img/pc2.png'> </div> </div> <div class='content_shadow'></div> </div> </div> ...... </div>
CSS样式
用于制作圆形图片效果的是.circle_inner
元素,它采用相对定位,超出的部分会被隐藏,并为所有的动画设置0.3秒的过渡效果。
body .circle_inner { border-radius: 200px; background: #B0D5D6; overflow: hidden; margin: auto; width: 200px; z-index: 1; -webkit-transition: all .3s; transition: all .3s; height: 200px; position: relative; }
在鼠标滑过时,它会被放大1.1倍。
body .circle_inner:hover { -webkit-transform: scale(1.1); transform: scale(1.1); }
同时会以不同的距离来移动它下面的图片,由于各个图片的移动速度不同,所以产生了视觉差效果。
body .circle_inner:hover .circle_inner__layer:nth-of-type(1) { left: -80px; -webkit-transition: all 4s linear; transition: all 4s linear; } body .circle_inner:hover .circle_inner__layer:nth-of-type(2) { left: -400px; -webkit-transition: all 4s linear; transition: all 4s linear; } body .circle_inner:hover .circle_inner__layer:nth-of-type(3) { left: -140px; -webkit-transition: all 4s linear; transition: all 4s linear; }
完整的代码请参考下载文件。