制作酷炫的图片遮罩缩放动画特效的CSS3代码

作者:课课家教育更新于： 2016-09-14 14:26:57

     纯css3绘图的各种好玩技巧很容易让程序员着迷，但是新手却不容易掌握。那么，CSS新手要利用CSS3制作出属于自己的作品是不是就成为了不可能的任务呢？本教程小编将降低门槛，把各种几何图形预先制作成图片，让初学者容易上手的同时，也可以独立完成一些炫酷的特效。

　　我们先来看一下效果图

　　效果图上的各种圆角多边形如果都用纯CSS3绘制，那想必能吓跑不少新手，因为这当中涉及太多复杂的技巧，但本教程我们摒弃一贯的纯代码作风，而以如下图所示的一些透明png图片代之。

　　要结合这样的图片实现最终效果，我们需要先理顺整个遮罩效果的层级结构，如下图所示。

　　限于篇幅，教程中不详细讲解details部分的制作过程。把图片都存放到html文件所在目录下的images文件夹后，就开始构建基础的HTML代码吧。

　　我们把构成该特效的两个元素都装在一个class=shape的div里，其中下层是实际使用的图片，上层则是遮罩的透明图片。

　　由于图片和遮罩需要重叠，所以内部的元素需要使用绝对定位。这就意味着外层的shape要显式设置绝对定位，让所有的坐标都以shape的左上角作为参考点。

　　这类特效都是鼠标移到图片上时遮罩放大，所以我们为a层定义一个公用的类选择器，名为overlay。但由于它们使用的遮罩图片不一致，所以它们又要有所区分。pantagon代表的是使用五边形图片作为背景。

　　看起来后者的样式反而简单点，我们写一下。

　　让背景显示图片的方法就是用url(图片地址)的格式来代替颜色值。

　　至于前者，其实也就是设置下绝对定位，不过由于图片是背景填充，所以div不会自动被撑大。我们需要让宽高占满整个shape。

　　运行效果如下图所示，遮罩效果轻松做出来了。

　　现在我们实现鼠标滑过放大的效果，我们是想让遮罩放大，因此我们利用hover伪类把缩放设置到overlay上（为什么不设置到pentagon上？请自行思考）。

　　缩放，移动，旋转等变换都通过transform属性进行控制，其中缩放的写法是scale(x方向缩放,y方向缩放)，这里我们让鼠标滑过图片的时候遮罩放大10%。

　　4行的功能完全一致，不同前缀用于兼容不同的浏览器。

　　运行一下，鼠标移到图片上，效果如下图所示，遮罩轻微放大了。

　　最后一步就是本教程的重头戏——过渡动画了。这是CSS3的一大特色，通过CSS3的transition属性，我们可以轻松实现两个状态之间的平滑过渡而无需依赖于javaScript。

　　我们需要让遮罩的两个状态平滑过渡，因此transition属性应定义到overlay类。

　　0.5s的意思是两状态过渡的总时间为0.5秒。

　　同样的，transition属性也需要用前缀兼容不同浏览器。

　　再次运行，鼠标移到图片上，遮罩就不会马上放大到1.1倍，而是在0.5秒内从100%缓慢放大到110%，效果看起来自然了很多。

　　本教程的知识容量不大，真正跟CSS3有关的也就是transform和transition了。虽然这两个属性的用法远不止这么点内容，但我们发现，最简单的设置也能得到相当不错的效果，对新手来说，易上手，效果好，容易收获成就感，性价比不是一般的高。所以小编姐姐希望通过本教程，让曾经被CSS3各种高难度技巧拒之门外的初学者们可以重拾自信，打好基础，在CSS3领域闯出属于自己的一片天！