霸气的HTML5 7款无Flash HTML5动画特效

purpleduck 发布于4天前 阅读39次
0 条评论

以前我们想在网页上实现一些动画特效,第一选择肯定是Flash,但是现在HTML5已经非常流行,我们很多时候都会选择HTML5来实现一些动画特效,尤其是利用HTML5 Canvas特性。下面分享7款无Flash HTML5动画特效。

1、HTML5 Canvas火焰喷射动画效果

还记得以前分享过的一款HTML5烟花动画 HTML5 Canvas烟花特效 ,今天我们要来分享一款类似的HTML5动画效果,一款基于HTML5 Canvas火焰喷射动画。用鼠标拖动一条直线,直线长度表示火焰喷射的力度,另外,火焰在运动中还可以反射效果哦。

霸气的HTML5 7款无Flash HTML5动画特效

在线演示 / 源码下载

2、HTML5 3D立方体旋转动画

之前我们已经分享一款 HTML5 3D正方体旋转动画 ,可以切换至正方体的任意一面。今天我们再来分享一款绚丽的HTML5 3D立方体旋转动画,这款立方体的色彩看上去非常艳丽,旋转起来的动画效果也十分流畅。是一款很不错的HTML5 3D动画效果。

霸气的HTML5 7款无Flash HTML5动画特效

在线演示 / 源码下载

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

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

霸气的HTML5 7款无Flash HTML5动画特效

在线演示 / 源码下载

4、HTML5小车动画 很酷的HTML5吉普车

有几天没有分享HTML5动画了,之前很多HTML5动画都是利用CSS3的一些特性和Canvas特性来完成,比如这个 HTML5/CSS3实现蝙蝠侠人物动画 就利用CSS3的动画特性, HTML5 Canvas模拟衣服撕扯动画 就利用了HTML5 Canvas特性。今天我们要分享一款利用HTML5/CSS3实现的吉普车动画,小车可以水平滚动,非常逼真。

霸气的HTML5 7款无Flash HTML5动画特效

在线演示 / 源码下载

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

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

霸气的HTML5 7款无Flash HTML5动画特效

在线演示 / 源码下载

6、HTML5摆动的文字特效 类似柳枝摆动

之前我们在html5tricks上分享过一些HTML5文字特效,像这款 HTML5/CSS3 3D文字特效 文字外翻效果 ,像这款 HTML5像素文字爆炸重组动画特效 都非常有特色。今天我们来分享一款可以摆动的HTML5文字特效,文字垂直下垂,并可以在微风中微微摆动,就像春风中的柳枝一样。

霸气的HTML5 7款无Flash HTML5动画特效

在线演示 / 源码下载

7、HTML5/CSS3 3D木块旋转动画

今天我们要来分享一款迷人的HTML5/CSS3 3D旋转动画,这款3D动画的主角是一根根小木条,每根小木条都会旋转,小木条之间的旋转有一定的间隔,这样就会有一种螺旋的视觉效果。另外,和之前分享的HTML5 3D动画一样,也是利用了CSS3的transform属性,点击这里可以查看更多 HTML5 3D特效

霸气的HTML5 7款无Flash HTML5动画特效

在线演示 / 源码下载

以上就是霸气的7款无Flash HTML5动画特效,欢迎收藏分享。

查看原文: 霸气的HTML5 7款无Flash HTML5动画特效

  • organiccat
  • organicbird
  • bluemouse
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。