让你大开眼界的9款HTML5动画特效

标签: 资讯 HTML5应用 | 发表时间:2014-05-15 15:02 | 作者:sxwgf
出处:http://www.html5tricks.com

前几篇文章中我们已经分享了许多令人惊叹的 HTML5 3D特效和HTML5 Canvas特效,确实非常不错,今天我们精选了9款让你大开眼界的 HTML5动画特效,一起来看看。

1、HTML5梦幻特效 可给任意元素添加魔幻效果

我们之前介绍HTML5动画特效比较多的是 HTML5 3D特效,今天我们来换一种风格,来分享一款看起来比较魔幻的HTML5特效。它可以给网页上任意元素(图片、文字等)添加这么一种效果,即鼠标滑过时,元素上就会出现非常魔幻的动画特效,什么特效呢?你可以点开demo链接查看。

html5-magic-effect

在线演示         源码下载

2、HTML5/SVG实现过山车动画

今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,效果非常酷。另外,关于更多SVG方面的动画,大家可以看看这款 HTML5 SVG狐狸奔跑动画HTML5/SVG实现随风摇摆的动画树,也都非常不错。

html5-svg-shanche-animation

在线演示         源码下载

3、HTML5像素粉碎图片动画 图片洒落一地

这款HTML5图片动画特效你绝对想不到,它将一张图片粉碎成许多像素颗粒,点击图片后,这些像素颗粒边掉落在地上,继续点击,粉碎的像素图片颗粒又会重新组合成完整的图片。用HTML5技术实现这种图片粉碎效果还是挺简单的,有兴趣的同学可以下载源码来学习。

html5-pixel-image-effect

在线演示         源码下载

4、HTML5 Canvas绘制灰太狼 超级可爱

HTML5 Canvas相当于一个画板,你可以在Canvas绘制任意的东西,今天要分享一款利用HTML5 Canvas绘制的灰太狼形象,个人以为,这个灰太狼绘制得十分逼真形象,小伙伴们都要惊呆了。以后我们再来弄一个HTML5 Canvas的喜洋洋如何?

html5-canvas-huitailang

在线演示         源码下载

5、用HTML5/CSS3给女朋友送个生日蛋糕

现在有了HTML5,我们在浏览器上制作动画已经不是什么难事了,但是一个好的创意却很难,比如说用技术来博得女孩子的喜欢。今天我们分享的这款生日蛋糕动画非常有创意,它是用svg来做的,利用HTML5的api让制作蛋糕的过程展示出来,这个蛋糕在妹子生日的时候送给她一定会让她觉得很惊奇。祝你成功哦!

html5-css3-new-cake

在线演示         源码下载

6、HTML5 SVG狐狸奔跑动画 相当大气

今天我要来向大家分享一款超级酷的 HTML5动画,它是一只快速奔跑的狐狸,奔跑的动作非常自然逼真,长长的狐狸尾巴也会随着摆动。另外,这款HTML5狐狸奔跑动画也是基于SVG的,前面我们也介绍过很多哦 SVG的动画效果,可见SVG在动画制作上也有很大的优势。

html5-svg-fox-run-animation

在线演示         源码下载

7、很有个性的CSS3弹跳Loading动画

今天我们要来分享一款非常具有创意的CSS3 Loading动画,这款CSS3 Loading动画是一个跳动的小球和几个滚动的小球组合而成,效果非常不错,我们也可以回顾一下之前分享的Loading动画,像这款 HTML5/CSS3超欢乐的小球跳动Loading动画特效也非常有特点。

css3-loading-jump

在线演示         源码下载

8、HTML5/CSS3奔跑动画 动画效果非常逼真

今天要分享一款很酷的模拟真人奔跑动画,它主要是利用 HTML5/CSS3技术结合多张图片的切换来实现的。这款 HTML5动画的逼真之处在于人物在奔跑的时候很有节奏感,而且有人物的投影。更重要的是当人物跑的越来越近是,人物的大小也会随之变大。很像一个小男孩从远处跑过来。

html5-boy-run-animation

在线演示         源码下载

9、一套HTML5/SVG表情图标 表情超可爱

这次我们要来向大家分享一款超级可爱的HTML5/SVG表情图标,一共有12组不同的表情,这些表情都是利用SVG Path绘制而成,对SVG熟悉的朋友应该觉得比较简单,但是这些表情的创意确实非常不错,你可以将这些svg表情应用到你的博客上去,非常可爱。

html5-svg-face-icon

在线演示         源码下载

以上就是9款优质的HTML5动画特效,大开眼界了吧,欢迎收藏分享。

相关 [开眼 html5 动画] 推荐:

让你大开眼界的9款HTML5动画特效

- - HTML5资源教程
前几篇文章中我们已经分享了许多令人惊叹的 HTML5 3D特效和HTML5 Canvas特效,确实非常不错,今天我们精选了9款让你大开眼界的 HTML5动画特效,一起来看看. 1、HTML5梦幻特效 可给任意元素添加魔幻效果. 我们之前介绍HTML5动画特效比较多的是 HTML5 3D特效,今天我们来换一种风格,来分享一款看起来比较魔幻的HTML5特效.

Adobe 发布 HTML5 网页动画工具 Adobe Edge

- Joji - ITeye资讯频道
    Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具Adobe Edge,允许设计师通过HTML5、CSS和JavaScript制作网页动画,无需Flash.     Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等.

Adobe发布HTML5网页动画工具{Adobe Edge}

- Zen - 36氪
Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具{Adobe Edge},允许设计师通过HTML5、CSS和JavaScript制作网页动画. Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等.

Adobe发布HTML5网页动画工具Adobe Edge

- XcessLeo - GeekPark 捕风捉影
Flash VS HTML5之争似乎即将见分晓. Adobe刚刚发布了一个新的工具{Adobe Edge},允许设计师通过HTML5、CSS和JavaScript制作网页动画. Adboe Edge的目的是帮助专业设计师制作网页动画乃至简单游戏. 目前该工具的重点放在动画引擎上,但未来将增加更多HTML5功能,比如Canvas、HTML5音频/视频标签等.

5个基于HTML5的加载动画推荐

- Tim - ITeye资讯频道
在Web开发中,加载动画是非常有用的,不要低估它,它可以让网站响应用户的交互,让用户知道服务器正在处理请求,并告知用户需要等待一段时间. 通常加载动画是GIF格式的,但是现在我们有强大的浏览器和技术(VML和Canvas),加载动画不再只限于GIF格式,它可以由JavaScript来生成,并高度可定制,以下是我整理的5个JavaScript实现的加载动画方案.

adobe神器Animate教程:创建HTML5动画(二)

- - 优设(UISDC)
久等了,上集我们制作了一个具有行走动作的蓝精灵动画,本集我们来为蓝精灵实现往返走动的效果. Symbol,即元件,是动画制作中常用的概念. 通过Symbol我们可以封装独立的动画元素,便于管理和重用. 脚本,是动画制作中另一个重要的概念. 在HTML5动画制作中,脚本即JavaScript脚本,通过脚本我们可以响应动画事件,实现交互,更自由的操控动画元素,比如元件动画的重复播放.

八大疯狂的HTML5 Canvas及WebGL动画效果

- - HTML5研究小组
HTML5、WebGL和JavaScript改变了长久以来的动画制作行业. 在过去的几年中,我们想要制作卓越的网页动画只能使用Flash和Java Applet. 而现在,使用脚本语言和渲染器在浏览器中实现疯狂的动画效果已经成为可能. 我们的电脑已经有足够的强大的能力去渲染最为复杂的动画效果. 现在浏览器和web技术的不断发展.

神器Animate教程:使用SpriteSheet创建HTML5动画

- - 优设(UISDC)
在Flash动画制作中,使用SpriteSheet制作动画元素是一个常见和普遍的方法. 在Edge Animate中,我们也可以利用SpriteSheet来制作HTML5动画. 本文将从一个示例出发,介绍在Edge Animate中如何使用SpriteSheet. 在文章 《EDGE ANIMATE:ADOBE新推制作HTML5动画可视化工具》中,可以看到一个简单的蓝精灵动画,一个蓝精灵从屏幕左侧走到右侧,又返回,然后不断重复.

三分钟HTML5画布(Canvas)动画教程

- - WebHek
通常大部分Web程序员平时的工作只是开发一些常规的网站、信息化办公系统等. 在他们的眼里,Web游戏动画开发程序员似乎神奇的多,Web游戏动画明显比普通的Web应用要灵活,更注重交互和视觉冲击,而动画动作、做图配色等方面更是外行. 之前我也在一篇《 未来web浏览技术提前体验:10个会让你惊叹不已的HTML5画布(canvas)技术应用演示》中向大家展示了Web动画的神奇魅力.

Collie——基于 HTML5 的高性能 JavaScript 动画库

- - 博客园_梦想天空
JavaScript 库,用于创建高度优化的. Collie 可以运行在 PC 和手机上,使用 HTML5 Canvas 和 DOM. Collie 能够多线程稳定的处理多个对象,支持很多实用的功能,包括精灵动画和用户事件. 稳定支持 iOS 和 Android,并为每个平台的渲染提供优化的方法. Drag&Drop(地址:.