html5作品展示的动效,7款很棒的HTML5/CSS3动画特效推荐

本文作者html5tricks，转载请注明出处

1、HTML5/CSS3可折叠的3D立方体动画

最近我们已经为大家分享过很多基于HTML5和CSS3的立方体动画，比如HTML5多立方体3D翻转动画和HTML5 3D立方体图片切换动画，效果都非常惊人。今天要给大家带来另外一款CSS3 3D立方体动画，尤其在DEMO2中可以看到，鼠标滑过立方体后，它将会被打开，从里面弹出另外一个小立方体，动画效果非常酷，非常逼真。

2、HTML5/CSS3古典纸扇动画

各位HTML5爱好者注意了，今天要给大家分享一款很有意思的HTML5动画，它是一把古典的纸扇动画，纸扇可以自动展开和收拢，并且厉害的是，利用CSS3和HTML5特性，纸扇还可以模拟扇动的效果，非常有意思。

3、HTML5实现DNA螺旋动画

记得之前我们分享过一款很酷的HTML5 DNA动画，螺旋效果不是很理想，今天分享的这款HTML5DNA螺旋动画效果就非常不错了，不仅具有更为立体的视觉效果，而且螺旋的效果也带有3D的动画特效，大家可以在DEMO演示中看到精彩的效果。

4、HTML5/CSS3鼠标悬停动画菜单按钮

之前我们已经向大家分享过很多炫酷的HTML5/CSS3菜单，包括多级下拉菜单、动画菜单等。今天要给给位分享一款基于CSS3的鼠标悬停动画菜单按钮，这款菜单是由一个个小按钮组成，当我们将鼠标滑过菜单项时，按钮上的图标将出现悬浮的动画特效。

5、HTML5 Canvas雨滴下落动画 超逼真

今天我们要来分享一款相当逼真的HTML5 Canvas雨滴下落动画，该动画模拟雨滴附在窗户上缓缓滑落的效果，同时窗户也因为雨滴而变得模糊，窗外的夜景便显得格外迷人。利用HTML5技术，该雨滴下落动画一共有5种不同的效果。由于Chrome的跨域限制，本地将无法运行，你可以在本站的在线演示中看到效果，或者将源代码上传至自己的服务器后浏览。

6、漂亮的CSS3圆角按钮组合

之前我们已经为大家分享过很多绚丽的CSS3按钮了，比如这款纯CSS3实现质感发光动画按钮和去年发布的HTML5/CSS3一组可爱的3D按钮。今天要分享的是一款CSS3圆角按钮，这组按钮有不同的颜色主题，利用CSS3特性实现了圆角效果，看上去还相当不错。

7、纯CSS3实现质感发光动画按钮

之前我们分享过很多漂亮的网页按钮动画，大家可以移步至CSS3按钮分类下查看各种各样的CSS3按钮。这次要分享的这款