HTML5和CSS3炫酷图片运动模糊和倾斜特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款效果非常炫酷的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>
    </div>
</div>

多张半透明图片堆叠在一起的效果