HTML5酷炫动画集锦

                                                                      HTML5酷炫动画集锦

           本人搜集了一些用HTML5实现的酷炫动画Demo。在这里进行展示，以供大家借鉴参考：

        1.HTML5 Canvas圆盘抽奖：

         实现效果截图：http://www.html5tricks.com/html5-canvas-choujiang.html

        

     2.jQuery/CSS3实现小鸟飞翔动画：

         实现效果图：http://www.html5tricks.com/jquery-css3-bird-fly.html

        3.酷炫的CSS3多窗口邮件阅读器：

       实现效果图：http://www.html5tricks.com/css3-cool-mail-reader.html

       

       4.HTML5 3D立体图片相册效果

        效果截图：http://www.html5tricks.com/html5-3d-image-gallery.html

      

    5.HTML5浪漫爱心表白动画

     效果截图：http://www.html5tricks.com/html5-heart-animation.html

    

     6.HTML5 Canvas瀑布动画 超逼真

     效果截图：http://www.html5tricks.com/html5-canvas-waterful.html

      

     7.HTML5粒子效果的文字动画特效

      效果截图：http://www.html5tricks.com/html5-pixel-text-effect.html

    

     8.HTML5 Canvas炫酷的火焰风暴动画

      效果截图：http://www.html5tricks.com/html5-canvas-firestorm.html

        

      9.HTML5 Canvas彩色像素进度条动画

     效果截图：http://www.html5tricks.com/html5-canvas-loader.html

      

     10.HTML5 Canvas放射线动画

     效果截图：http://www.html5tricks.com/html5-canvas-radian.html

     

     11.HTML5/CSS3实现图片倒影3D效果

      效果截图：http://www.html5tricks.com/html5-css3-image-shadow.html

       

     12.HTML5 Canvas实现会跳舞的时间动画

      效果截图：http://www.html5tricks.com/html5-canvas-dance-time.html

     

      13.3D HTML5 Logo动画 HTML5多视角3D旋转动画

       效果截图：http://www.html5tricks.com/3d-html5-logo-animation.html

       

     14.HTML5 WebGL水面水波荡漾特效 可多视角展示 超逼真

     效果截图：http://www.html5tricks.com/html5-webgl-water-effect.html

      

     15.HTML5 Canvas烟花特效 场景十分华丽

      效果截图：http://www.html5tricks.com/html5-firework-effect.html

       

      16.HTML5 Canvas模拟衣服撕扯动画 超级逼真

      效果截图：http://www.html5tricks.com/html5-cloth-tear.html

      

       17.JQuery+Html5实现唯美表白代码：亲爱的女神，我来了！

   效果截图：http://js.itivy.com/?p=1996

   

   18.HTML5/CSS3激光宝剑动画 有星球大战的感觉

     效果截图：http://www.html5tricks.com/html5-css3-swords.html

    

      19.HTML5 Canvas火焰闪烁动画 火焰跟随鼠标

      效果截图：http://www.html5tricks.com/html5-canvas-fire-animation.html

      

      20.HTML5电子书翻页动画特效

        效果截图：http://www.html5tricks.com/html5-book-page.html

    

      21.JQuery图片抖动插件

       效果截图：http://www.html5tricks.com/jquery-image-shake.html  

         

      22.超炫酷的CSS3进度条动画 背景色渐变

       效果截图：http://www.html5tricks.com/10-html5-animation-apps.html

      

      23.CSS3鼠标悬停图片动画 15种超酷动画

       效果截图：http://www.html5tricks.com/css3-hover-image-15-animation.html

     

     24.HTML5 Canvas粒子效果文字动画特效

    效果截图：http://www.html5tricks.com/10-cool-html5-text-animation.html

        

     25.HTML5 SVG 3D蝴蝶飞舞动画

    效果截图：http://www.html5tricks.com/html5-3d-butterflies.html  

    

      26.HTML5梦幻特效 可给任意元素添加魔幻效果

      效果截图：http://www.html5tricks.com/html5-magic-effect.html 

     

      27.HTML5实现图形挤压变形动画

      效果截图：http://www.html5tricks.com/html5-image-extrusion.html

      

       28.HTML5/CSS3五彩旋转Loading加载动画

      效果截图：http://www.html5tricks.com/html5-css3-color-loading.html

     

      29.CSS3扇形动画菜单 鼠标滑过扇形展开动画

      效果截图：http://www.html5tricks.com/css3-sector-menu.html

     

      30.纯CSS3实现眨眼动画 超逼真

      效果截图：http://www.html5tricks.com/html5-css3-eyes.html

     

      31.HTML5火球挡板碰撞动画游戏

      效果截图：http://www.html5tricks.com/html5-breakout-game.html

     

   32.纯CSS3和SVG鼠标滑过灯泡发光特效

      效果截图：http://www.html5tricks.com/pure-css3-svg-shine-effect.html

     

      33.JQuery 3D圆盘旋转焦点图 支持鼠标滚轮

       效果截图：http://www.html5tricks.com/jquery-3d-circle-image-slider.html

      

      34.HTML5动感的火焰燃烧动画特效

       效果截图：http://www.html5tricks.com/html5-cool-fire-effect.html

      

      35.HTML5 3D爱心动画 晚来的七夕礼物

       效果截图：http://www.html5tricks.com/html5-3d-heart-animation.html

      

      36.HTML5 Canvas发光Loading动画

       效果截图：http://www.html5tricks.com/html5-canvas-shine-loading.html

       

     37.HTML5 Canvas Google电吉他 支持键盘弹奏

       效果截图：http://www.html5tricks.com/html5-google-guitar.html

      

     38.HTML5 Canvas雷达扫描动画特效

       效果截图：http://www.html5tricks.com/html5-canvas-leida-animation.html

     

     39.HTML5 Canvas 3D旋转物体动画 模糊发光特效

       效果截图：http://www.html5tricks.com/html5-3d-rotation-with-shine.html

      

     40.CSS3弹簧线圈动画

       效果截图：http://www.html5tricks.com/css3-slinky-animation.html

      

      41.HTML5 Canvas波浪动画 可调节波浪高度

       效果截图：http://www.html5tricks.com/html5-wave-animation.html

       

      42.HTML5火焰文字特效

       效果截图：http://www.html5tricks.com/html5-css3-fire-text.html

      

     43.HTML5/CSS3超酷环形动画菜单

       效果截图：http://www.html5tricks.com/html5-css3-circle-menu.html

      

      44.纯CSS3实现滑杆开关切换按钮动画

       效果截图：http://www.html5tricks.com/css3-stick-switch.html

      

      45.HTML5 Canvas火焰喷射动画效果

       效果截图：http://www.html5tricks.com/html5-fire-ball-shooter.html

      

     46.HTML5可爱的404页面动画 很逗的机器人

      效果截图：http://www.html5tricks.com/html5-404-page-animation.html      

   

      47.HTML5鲸鱼动画 又一款超酷HTML5动画

      效果截图：http://www.html5tricks.com/html5-whale.html

      

      

     48.纯CSS3实现自行车动画 非常逼真

      效果截图：http://www.html5tricks.com/html5-css3-bike-animation.html

      

     49.CSS3飘带状3D菜单 菜单带小图标

      效果截图：http://www.html5tricks.com/css3-ribbon-3d-icon-menu.html

      

      50.纯CSS3背景图标渐变按钮

      效果截图：http://www.html5tricks.com/css3-icon-bg-animated-button.html

      

     51.四组欢乐的CSS3 Loading加载动画

     效果截图：http://www.html5tricks.com/4-happy-css3-loading-animation.html

     

     52.HTML5/CSS3可折叠的3D立方体动画

      效果截图：http://www.html5tricks.com/html5-css3-unfold-3d-cube.html

      

     52.CSS3图片悬停放大特效

     效果截图：http://www.html5tricks.com/css3-image-float-zoomin.html

      

     53.CSS3/jQuery全屏立体焦点图 时尚大气

     效果截图：http://www.html5tricks.com/css3-jquery-fullscreen-image.html

     

     54.JQuery视差滑块幻灯特效

        效果截图：http://js.itivy.com/?p=2101

    

        55.HTML5树叶飘落动画 HTML5动画经典

     效果截图：http://www.html5tricks.com/css3-fall-leaves.html

     

    56.HTML5 3D图片折叠特效 超炫酷图片特效

    效果截图：http://www.html5tricks.com/html5-3d-fold-image.html

    

       57.超炫酷的HTML5 Canvas全屏动画背景

    效果截图：http://www.html5tricks.com/html5-canvas-fullscreen-background.html

    

    58.HTML5 Canvas模拟三角函数sin图像生成

    效果截图：http://www.html5tricks.com/html5-canvas-sin.html

    

    59.HTML5/CSS3一组可爱的3D按钮

    效果截图：http://www.html5tricks.com/html5-css3-pretty-button.html

    

    60.HTML5 3D动画柱形图表

    效果截图：http://www.html5tricks.com/html5-3d-animated-bar-chart.html

    

    61.HTML5粘浏览器的小泥块 超级可爱动画

    效果截图：http://www.html5tricks.com/html5-sticky.html

    

    HTML5优秀的动画例子很多。我在这里也只是抛砖引玉，相信以后会有更多奇妙的点子出来。

    从以下网站可以找到很多优秀的示例Demo，并将其中的好设计理念应用到我们的项目中。

    HTML5资源教程 ：http://www.html5tricks.com/