返回 登录
4

9款惊艳的HTML5/CSS3动画应用赏析

Web开发的未来必定是让网页更加的多样化,更加绚丽多彩,用户交互更加方便。HTML5的应用正好可以达到这一要求,本文主要分享了9个基于HTML5和CSS3的动画应用,效果相当惊艳,一起来看看吧。

1、HTML5 Canvas实现会跳舞的时间动画

这是一款很有意思的HTML5 Canvas时间动画,总体来说,它是一个可以和客户端同步的时钟,其特点是当时间走动时,数字将会散落成一个个粒子动画,这种HTML5 Canvas动画在之前也有分享过,比如这个HTML5粒子文字特效

html5-canvas-dance-time

在线演示 / 源码下载

2、HTML5 SVG绘制的纸鹤动画 带颜色渐变效果

前面我们分享过一款基于HTML5和SVG的创意开关切换按钮,比较实用。这次要带来的这款HTML5应用也是基于SVG的,是一只雄伟的纸鹤,并且纸鹤的皮肤颜色会不断地发生变化,动画效果非常不错,小编认为,如果纸鹤能动起来那就更加完美了,期待您去完善它。

html5-svg-firebird

在线演示 / 源码下载

3、HTML5 Canvas炫酷的火焰风暴动画

利用HTML5技术,我们已经实现过不少关于火焰动画特效的HTML5应用,尤其是和Canvas搭配,比如HTML5动感的火焰燃烧动画特效HTML5 Canvas火焰喷射动画效果。这次给大家带来的是一款基于HTML5 Canvas的火焰风暴动画特效,改动画效果就像从天上掉落火焰一样,火焰风暴逐渐蔓延到整一个画布。

html5-canvas-firestorm

在线演示 / 源码下载

4、HTML5五彩连珠小游戏

之前我们分享过很多炫酷的HTML5游戏,比如HTML5堆木头游戏,实现原理也是比较简单的。今天我们要分享另外一款HTML5小游戏,名字叫五彩连珠。点击彩球移动到期望的位置,每移动一次,画面将随机出现3个新的彩球;当同一颜色的彩球连成5个一行或一列或一斜线时,这5个彩球同时消失,游戏得分10分。当画面上每个方格都被彩球占满时,游戏结束。

html5-color-game

在线演示 / 源码下载

5、CSS3音量调节旋转按钮

之前我们分享过很多可以调节音量的HTML5视频播放器,大部分音量调节按钮都比较普通,没有什么特色。今天要分享一款基于CSS3的音量调节旋转按钮,只要按住鼠标即可旋转按钮来调节音量。这是一款很有特色旋转按钮。

css3-rotate-buttons

在线演示 / 源码下载

6、纯CSS3实现超酷的磁带动画

记得之前分享过一款HTML5磁带式古典播放器,效果相当震撼。这次我们要用纯CSS3来实现一个超酷的磁带动画特效。首先用纯CSS3绘制了一个磁带的外观,还是相当逼真的,然后用CSS3的动画属性实现了磁带的旋转,就像在播放歌曲一样,如果配合HTML5的音频播放功能,就和那个磁带播放器差不多了。

css3-cassette-tape

在线演示 / 源码下载

7、HTML5仿Apple Watch时钟动画

Apple Watch刚刚发布不久,就已经有国外的大牛将其时钟表盘界面用HTML5模仿出来了,并且这款HTML5仿Apple Watch的时钟是动态的,可以根据本地时间实时更新指针数据。时钟的界面非常华丽,确实有苹果的风格,HTML5也的确非常强大。

html5-apple-watch

在线演示 / 源码下载

8、CSS3 3D镂空文字特效

之前我们有分享过一款镂空效果的CSS3按钮,镂空部分可以定义其他的背景图片。今天我们要介绍的也是一款基于CSS3的镂空文字特效,这样的镂空文字效果在以前很难实现,必须使用背景图片,但是现在利用CSS3,这种镂空效果变得非常简单。

css3-3d-stroke-text

在线演示 / 源码下载

9、jQuery/CSS3实现网页元素抖动特效

今天我们要来分享一款很酷的jQuery/CSS3动画特效,它可以让网页中的元素进行抖动,抖动的参数也可以自定义设置。可以定义抖动的快慢、方向以及更为复杂的抖动效果。改应用基于jQuery和CSS3实现,实现起来也比较方便。

jquery-css3-shake

在线演示 / 源码下载

以上就是9款惊艳的HTML5/CSS3动画应用赏析,欢迎收藏分享。 转载请注明来源:http://www.html5tricks.com/9-amazing-html5-css-animation.html

评论