高级HTML5讲师分享：CSS3 2D炫酷动效及css3选择器的用途与重要性

HTML5确实非常强大，小编之前也分享过很多基于HTML5 Canvas的动画特效。但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果？对，CSS3可以做到。2D炫酷动效是需要技术积累的，这里有4个重点大家可以着重掌握一下：

CSS3 2D炫酷动效

1. 了解canvas动效原理

就是不断清除画布再绘制，清除再绘制。

2. 一定的JS基本功

了解实例对象的属性如何获取，以及上下文this指代什么；如何有效地遍历以及数据存储等等。

3. 知道如何运用一些动画算法

4. 了解canvas所有API，尤其基本的绘图API

如何使用canvas绘制线条，绘制圆，绘制不规则图形；如何描边，如何填充，如何控制透明度等等，都是必须要牢固掌握的。因为，无论是是圆圈圈，还是角星星，都离不开这些基础的API绘制。还需要了解图像绘制API，例如，本demo的星星，实际上还可以基于图片资源绘制，难度会稍微降低些，但可能要牺牲点效果。

css3选择器的用途与重要性

css3选择器是基于css2的一种创新，在css2的基础上增加了目标伪类选择器、语言伪类选择器、UI元素状态伪类选择器、结构伪类选择器、否定伪类选择器。

大致有以下三点作用：

1.网页代码更简洁，结构更清晰。

2.免除起名的烦恼。

3.避免css式样不生效。

在主页制作时采用css3技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。css3提供了非常多新途径去改善的设计工作，且做了不少重要的变化。

css3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持css2。对我们来说，css3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。

与css相比，使用css3有什么好处呢？最明显的就是css3能让页面看起来非常炫、非常酷，使网站设计锦上添花，但它的好处远远不止这些。在大多数情况下，使用css3不仅有利于开发与维护，还能提高网站的性能。与此同时，还能增加网站的可访问性、可用性，使网站能适配更多的设备，甚至还可以优化网站SEO，提高网站的搜索排名结果。

现在网站重视的更多的是用户体验，而优秀的动效则能使你的应用更具交互性，从而吸引更多用户的使用。在网站中加入一些动效会让整个页面看起来很有动感。但是如果你对CSS3中定义动效还不熟练，就需要多加学习、多加练习。