本文作者html5tricks,转载请注明出处
HTML5和CSS3已经被越来越多的开发者和使用用户所接受,我们很多的网站也已经逐步向HTML5技术靠拢,因为HTML5可以给用户带来前所未有的视觉体验和操作体验,当然随着CPU和内存的增大,HTML5的发展会更加不错。本文向大家推荐7款很棒的HTML5/CSS3动画特效,希望能给各位Web开发者带来一点帮助。
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按钮。这次要分享的这款CSS3按钮有着质感的背景,并且鼠标滑过按钮时按钮边框还会发光,呈现出3D立体的视觉效果。
以上就是7款很棒的HTML5/CSS3动画特效,欢迎收藏分享。
转载请注明原文链接:https://www.html5tricks.com/7-html5-css3-animation.html