HTML5 Canvas柳枝随风飘摇动画

4,606 人浏览

2019-11-30 18:50:19

这是一款用HTML5 Canvas模拟的柳树随风飘摇的动画特效，首先柳枝和柳叶的模拟通过CSS实现，虽然不是很逼真，但是这并不是这个动画的重点。重点在于我们将鼠标滑过柳枝时，就像微风拂过一般，将柳枝和柳叶飘摇起来，这中间大家可以学习如何用HTML5技术在Canvas画板上实现动画。

在线演示源码下载

纯JS实现带二级菜单的图片轮播动画

3,622 人浏览

发表回复

之前我们分享过很多基于jQuery的图片轮播动画，确实用jQuery插件可以非常方便的实现图片滑块和轮播，但是如果我们在项目中不希望使用任何第三方框架的话，那我们就只能用JS自己编写了，这个图片轮播动画代码是一个很好的案例，它采用纯JS代码实现，并且功能上也比较强大，左侧带有二级菜单栏，还是比较实用的。

在线演示源码下载

CSS3实现的卡通文字动画

4,765 人浏览

发表回复

2019-11-28 18:44:43

这是一个利用CSS3动画特性和Google字体库实现的卡通文字动画，首先引入Google的字体库，这样我们就可以在css中使用”Luckiest Guy”字体，这种字体就体现了卡通的样式。再利用CSS3将文字按圆弧路径显示，然后再用CSS3的动画特性让文字显示的时候采用跳入和淡入的方式，实现的比较可爱的动画效果。

在线演示源码下载

SVG结合CSS3实现的一套动画表情

3,000 人浏览

发表回复

2019-11-27 22:25:31

很早以前我们为分享过一款很可爱的青蛙表情集合，大家的反应都还不错。这次我们要分享的是另外一种表情动画实现方式，就是通过SVG结合CSS3的方式来实现一套动画表情，利用SVG的路径功能绘制表情，然后通过CSS3来让表情产生动画效果。

在线演示源码下载

CSS3评分统计柱形图进度条

5,199 人浏览

发表回复

2019-11-26 19:59:45

之前我们分享过很多典型的柱形统计图和进度条，比如这款CSS3实现漂亮的柱形图表和这款jQuery/CSS3动感实用的进度条插件 10种漂亮外观，都用上了CSS3的相关特性。今天我们要分享的是一款CSS3评分统计应用，它正是利用了柱形统计图和进度条的特性，还是比较简洁和漂亮的。

在线演示源码下载

HTML5 背景图片毛玻璃模糊特效

12,062 人浏览

发表回复

毛玻璃特效其实是对图片的模糊处理，我们经常会在手机app中上拉应用时出现背景图片模糊特效，这就是毛玻璃特效。这次我们要分享一款基于HTML5和CSS3实现的背景图片毛玻璃模糊特效，我们在页面上加载一张清晰图片，然后指定图片范围内生成毛玻璃模糊效果，通过边框阴影的添加，使这种毛玻璃特效更显3D立体效果。

在线演示源码下载

jQuery输入框弹出日历时间插件

5,803 人浏览

发表回复

2019-09-21 21:36:59

之前我们分享过很多基于jQuery和CSS3的日期时间选择插件和日历插件，比如这款基于 AngularJS 的日期和时间选择组件和CSS3可切换背景颜色的日历控件就非常漂亮和实用。这次分享的是一款基于jQuery的日历时间插件，点击输入框后日历将会弹出，并可以开启时间选择模式选择更具体的时间，也是一款非常实用的jQuery日历插件。

在线演示源码下载

CSS3鼠标滑过图片效果用Font Awesome库实现悬停图标

3,493 人浏览

发表回复

今天给大家带来一个比较传统但却非常实用的CSS3应用，它的功能是可以快速生成一个带鼠标滑过特效的图片，当鼠标滑过图片时，图片上方将会打开遮罩层，浮现自定义的标题等文本，也可以采用Font Awesome网页图标库实现各种功能按钮。另外它还有一个特点是可以生成多张这种效果的图片，并实现相应式布局，随着页面大小的调整改变最佳的图片排列方式。