这是一款使用纯 CSS3 制作的效果非常炫酷的圆形图片鼠标滑过背景视觉差动画特效。该视觉差特效中,在鼠标滑过圆形图片时,图片中的各层元素以不同的速度开始动画,形成强烈的视觉差效果。
该视觉差特效使用的 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>
用于制作圆形图片效果的是.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;
}
完整的代码请参考下载文件。
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!