纯CSS3绘制可爱的蚱蜢还有眨眼动画

17,896 人浏览

2014-04-21 07:00:00

今天我们要分享一个利用纯CSS3绘制的蚱蜢动画，非常可爱，之前我们也分享过很多利用纯CSS3绘制的人物、动物等很有特点的效果，比如纯CSS3绘制可爱小男孩动画、纯CSS3 Android Logo动画绘制等。这款CSS3蚱蜢还有眨眼的动画，非常酷。

css3-grasshopper

在线演示源码下载

HTML5/CSS3实现大风车旋转动画

49,462 人浏览

发表回复

这次我们要来分享一款很酷的HTML5动画，是一个可以旋转的大风车动画效果，回顾一下利用HTML5实现的旋转动画，我们可以看HTML5/CSS3实现3D旋转陀螺动画，它们的实现都是利用CSS3的transform:rotate属性，这款大风车动画的确比较厉害的。

html5-css3-windmill

在线演示源码下载

纯CSS3 3D图片翻转展示图片3D阴影效果

12,809 人浏览

发表回复

2014-04-20 12:35:33

之前我们分享过一些HTML5图片3D效果，这篇文章分享10款效果惊艳的HTML5图片特效中我们可以看到很多3D的图片特效。今天我们再来分享一款利用纯CSS3实现的3D图片翻转展示特效，点击图片或者下方的翻页按钮即可选中相应的图片，并实现翻转展示效果。

css3-3d-image-coverflow

在线演示源码下载

纯CSS3实现Metro风格登录表单

12,310 人浏览

2条回复

今天我们要来分享一款利用CSS3实现的Metro风格的登录表单，之前我们也已经分享过很多非常实用而绚丽的CSS3登录表单，像这款HTML5/CSS3折叠动画登录表单就非常立体，而这款非常上档次的HTML5/CSS3登录表单非常大气，这款Metro风格的登录表单应该也挺棒的。

css3-metro-login-form

在线演示源码下载

HTML5/CSS3实现3D旋转陀螺动画

30,204 人浏览

发表回复

这次我要向大家分享一款很有创意的HTML5/CSS3动画特效，它是一个可以旋转的3D陀螺动画。这个动画和之前分享的HTML5动画类似，主要也是利用了CSS3的transform属性，让物体旋转起来，同时对translateZ赋值实现左右摇摆的动画，让整个陀螺旋转非常逼真。

html5-css3-3d-romb

在线演示源码下载

HTML5 3D实景地图动画 3D效果很酷

40,901 人浏览

1条回复

利用HTML5来实现3D的效果真的非常酷，也比较简单，我们可以来回顾一下之前介绍的一些HTML5 3D动画效果。今天我们来分享一款全新的HTML5 3D效果，是一款3D实景地图，这款3D地图截取了实景的房屋大厦，并且可以旋转展示，非常酷。

html5-3d-real-map

在线演示源码下载

30几个HTML5经典动画应用回顾让你大饱眼福

376,773 人浏览

7条回复

2014-04-19 09:21:23

周末大放送，让我们来回顾一下HTML5经典动画应用，一定会让你大饱眼福。

1、HTML5 Canvas画板画图工具可定义笔刷和画布

HTML5 Canvas还有一个比较实用的应用，那就是网络画板，这样我们就可以在网页上直接进行画图操作。今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能，我们可以自定义笔刷的类型、粗细、颜色，也可以定义画布的大小和背景颜色等。我们也可以对这款HTML5画图工具进行扩展，让它的画图功能更加完善。