html绘制头像原样教程,CSS实例教程：创意CSS3头像展示教程

今天就为大家分享一个非常有创意的CSS3头像展示效果，交互性强，是一个基于css3和js来实现的，代码量不多，但是最终的效果却很让人赞叹，所以特别推荐给大家。其中关于本示例的一些css样式呈现，个人认为还有很大的发挥空间，例如鼠标经过的时候而不是切换成一个背景色和文字，而是替换成其他的相关图片(例如改为人物的其他表情)，这将会是非常的有意思的。

好了，接下来我们一起看看其效果的制作方法。

HTML代码结构:

看了上面代码是极其简单的，就一个列表元素，你需要放多少张图片就写多少

里面的结构如上。

CSS样式表:

接下来就是我们的css样式表了，在这里只是一个示例，大家在这部分可以自由发挥，定义出你们的个性来。

JavaScript代码：

最后，我们需要借助JavaScript来完成一些特殊的互动(动画效果)。

到这里，我们的示例基本上就完成了，但是按照上面几步来，最终是没效果的，那是因为我们还没引入jQuery库和一个jQuery插件(jQuery Transit)。

jQuery Transit是一个利用了CSS3的过渡和转换特性来实现动画特效的 jQuery插件，与jQuery的animate方法有着同样的语法。此插件支持这个特性所提供的大部分方法，同时增加了 jQuery 独有的技术：回调(callbacks)、自动增加浏览器CSS前缀、链盒(chaining)等。由于此插件使用了真正的CSS3规则，所以它不能兼容旧版本的浏览器。