html中圆形背景图片,纯CSS3圆形图片鼠标滑过背景视觉差动画特效

这是一款使用纯CSS3制作的效果非常炫酷的圆形图片鼠标滑过背景视觉差动画特效。该视觉差特效中，在鼠标滑过圆形图片时，图片中的各层元素以不同的速度开始动画，形成强烈的视觉差效果。

使用方法

HTML结构

该视觉差特效使用的HTML结构为嵌套

的HTML结构。在包裹容器div.page中，每一个div.content元素是一个视觉差效果。在它里面是一个用于圆形图片的div.circle元素。所有的图片都放置在div.circle_inner中，div.content_shadow是圆形的阴影效果。

......

......

......

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;

}

完整的代码请参考下载文件。