10款HTML5 SVG绘制的纸鹤动 带颜色渐变效

1.HTML5 SVG绘制的纸鹤动 带颜色渐变效

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

在线演示

源码下载

2.CSS3 3D镂空文字特效

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

在线演示

源码下载

3.CSS3音量调节旋转按钮

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

在线演示

源码下载

4.HTML5五彩连珠小游

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

在线演示

源码下载

5.Waves

Waves 点击效果的灵感来自于 Google Material Design，很容易使用。只需要引 waves.min.css waves.min.js HTML 文件中可以使用了。采 Touchstart Touchend 事件，支持移动设备

在线演示

源码下载

6.Textillate.js

Textillate.js 是一款实现极 CSS3 文本动画的简单插件。它整合了两个流行的工具库（animate.css lettering.js）来提供易于使用的插件，能够 CSS3 动画应用到文本内容上

在线演示

源码下载

7.Bounce.js

Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库，使用其特有的方式生成的动画效果。只需添加一个组件，选择预设，然后你就可以得到一个短网址或者导出为 CSS 代码

在线演示

源码下载

8.Walkway.js

Walkway.js 是一个使用线条和路径元素组成 SVG 动画图像的简单方法。只需根据提供的配置对象创建一个新 Walkway 实例就可以了。这种效果特别适合那些崇尚简约设计风格的网页。目前， Walkway.js 仅适用于路径和线条元素

在线演示

源码下载

9.Lazy Line Painte

Lazy Line Painter 是基 Raphaël（一个用于在网页中绘制矢量图形的 Javascript 库） jQuery 路径动画插件，能够把线条图案转换为吸引眼球的路径动画模式

在线演示

源码下载

10.Magic CSS3

Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包，你可以自由地使用您的 Web 项目中。只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版 magic.min.css 就可以使用了

在线演示

源码下载

未经允许不得转载：爱前端网 » 10款HTML5 SVG绘制的纸鹤动 带颜色渐变效