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

PetitQ 图片/图形 2019-3-01 1.59K 0 0

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

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

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

已有 398 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

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

HTML 结构

CSS 样式

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

相关文章

CSS3鼠标悬停hover图片遮罩层样式

产品图片360度旋转预览jQuery插件

简单易用的jquery放大镜插件

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复