CSS3炫酷图片运动模糊和倾斜特效

PetitQ 图片/图形 2019-1-20 1.41K 0 0

这是一款效果非常炫酷的 HTML5 和 CSS3 图片运动模糊和倾斜特效。该图片特效在鼠标滑过图片的时候，图片产生轻微的运动模糊效果，并且图片在 3D 空间中会轻微的倾斜旋转，效果非常震撼。这个图片倾斜效果是使用的方法是将图片复制为多个半透明的新层，在鼠标滑过时移动和倾斜这些半透明层。该效果使用了许多新的 CSS3 技术，如 CSS3 3D Transforms，这些属性只在最新版本的现代浏览器中可以正常运行。另外这些效果只有在鼠标滑过时才会有效果，也就是说在移动触摸设备上不会看到任何效果。

工作原理

该图片特效将原来的图片复制出多个半透明的新层，每一个新层都根据配置来运动，形成运动模糊效果。原始图片的容器必须设置明确的宽度和高度。

在图片上使用 tilt-effect class。

也想出现在这里？联系我们吧

```
<div class="grid__img">
```

  <img class="tilt-effect" src="img/theimage.jpg" alt="The image" />

```
</div>
```

最终一张图片生成的 HTML 结构如下，多张图片会堆叠在一起：

```
<div class="grid__img">
```
```
    <div class="tilt">
```

        <div class="tilt__back" style="background-image: url(img/theimage.jpg);"></div>

        <div class="tilt__front" style="opacity: 0.7; -webkit-transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); background-image: url(img/theimage.jpg);"></div>

        <div class="tilt__front" style="opacity: 0.7; -webkit-transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); background-image: url(img/theimage.jpg);"></div>