资讯频道 → Web前端
阅读更多

9顶
0踩

Web前端

原创新闻 8 款效果惊艳的 HTML5 3D 动画

2014-06-25 17:21 by 见习编辑 html5_dev 评论(8) 有36912人浏览
html5 css 前端 动画

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

HTML5凭借着其强大的3D渲染能力，让很多开发者都跃跃欲试，都想亲自体验一下HTML5的3D效果。今天本文就分享8款效果惊艳的HTML5 3D动画，您可以捡现成的看看，顺便也可以学习学习HTML5的相关知识。

1、HTML5 WebGL水面水波荡漾特效

这是一款更加给力的HTML5水波动画，画面上是一个大水池，水池底部是一颗大石头，在水面上点击即可泛起水波，加上模拟光的照射，水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动，也可以拖动画面多视角观看该HTML5水波动画。



在线演示  /  源码下载

2、HTML5 Canvas 3D旋转物体动画，模糊发光特效

今天要介绍的这款HTML5 3D动画是一个旋转的物体，并且利用CSS3的特性，物体会发出模糊和发光的动画特效，旋转起来效果特别酷。



在线演示  /  源码下载

3、HTML5 3D旋转图片相册，可鼠标悬停

这款HTML5 3D旋转图片相册又非常绚丽，是一面立体的图片墙，图片不停的切换，鼠标滑过图片时即可激活图片查看。



在线演示  /  源码下载

4、HTML5 3D衣服摆动特效

这是一款HTML5 3D衣服摆动动画特效，动画也是在HTML5 Canvas上完成，它模拟衣服晾在绳子上，点击鼠标可以让衣服摆动起来，就行风吹动它一样，非常逼真炫酷。



在线演示  /  源码下载

5、HTML5 3D立方体阵列，有规律的旋转动画

这是一款基于HTML5的3D立方体动画特效，特别的是，它不是一个立方体，而是由多个立方体组成的立方体阵列，同时阵列中的每一个立方体都会有规律的旋转，从而产生很酷的动画效果。



在线演示  /  源码下载

6、HTML5 3D手掌动画，看起来很抽象

这是一款很酷的HTML5 3D动画，它是用一个个像素点构造的3D立体手掌动画，你可以拖动鼠标从不同的侧面观看这只非常抽象的手掌。



在线演示  /  源码下载

7、HTML5/CSS3书本翻页3D动画

这是一款基于HTML5和CSS3的书本翻页3D动画，当我们将鼠标滑过书本时，书本就会自动一页页翻过去，书本的3D效果非常不错。



在线演示  /  源码下载

8、HTML5 3D阴影文字特效

这是一款非常简单大气的HTML5 3D文字特效，这个3D文字特效是通过文字加粗以及文字阴影来实现的，效果非常不错。



在线演示  /  源码下载

以上就是8款效果惊艳的HTML5 3D动画，欢迎收藏分享。
  • 大小: 54 KB
  • 大小: 39.4 KB
  • 大小: 40.2 KB
  • 大小: 20 KB
  • 大小: 24.1 KB
  • 大小: 14.5 KB
  • 大小: 15.8 KB
  • 大小: 19.7 KB
来自: html5tricks
9
顶
0
踩
评论 共 8 条 请登录后发表评论
8 楼 小小与大大 2014-09-03 19:03
mark.
7 楼 huoquan 2014-08-21 13:43
强大的UI框架点这里
6 楼 YuHuang.Neil 2014-07-03 22:04
强大~
5 楼 lz958942 2014-07-03 09:18
兼容IE的比较少
4 楼 SpringJava 2014-07-01 11:52
 
3 楼 wkkyo 2014-06-30 09:02
亮瞎我的眼
2 楼 yangliweng2 2014-06-27 09:59
没想到HTML5居然这么强大
1 楼 sxwgf0003 2014-06-26 10:18
mark  

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Global site tag (gtag.js) - Google Analytics