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

当前位置:主页 > CSS3库 > CSS3动画 > 纯CSS3圆形图片鼠标滑过背景视觉差动画特效
纯CSS3圆形图片鼠标滑过背景视觉差动画特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:01-25
    阅读:
简要教程

这是一款使用纯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;
}    
  

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