HTML5 Canvas冰川波浪起伏动画

之前我们分享过很多基于HTML5 Canvas的水波动画,其中一款基于WebGL的水面水波荡漾特效相当绝妙。还有这款HTML5 Canvas 3D波浪翻滚动画也是非常不错。这次我们要带来的同样是一款基于HTML5 Canvas的波浪起伏动画,这次的是冰川波浪起伏动画,在Canvas上绘制冰川效果的形状,然后利用动画特性让这些冰川不停地起伏起来。

html5-canvas-ice-wave

在线演示源码下载

JavaScript可展开隐藏的侧边栏下拉菜单

这是一款基于纯JavaScript实现的侧边栏菜单,因为整个菜单并没有使用jQuery等第三方插件,因此菜单比较轻量级的。这款JS侧边栏菜单的特点是点击按钮可以展开和隐藏,并且在隐藏时自动显示提示文字,展开后又隐藏提示文字,很好地做到了自适应效果。

javascript-side-drop-menu

在线演示源码下载

CSS3地图热点区域动画

今天我们要给大家分享一款基于CSS3的地图动画,它的核心功能并不是地图数据的展示,比如城市和省份地区的关系,而是展示了热点地区的动画特效。在地图上分布了很多热点区域,利用CSS3的动画属性实现这些热点区域的闪烁动画效果。

css3-map-hot-area

在线演示源码下载

HTML Canvas火焰画笔动画

之前我们为大家分享过很多关于火焰的HTML5动画,像这个HTML5 Canvas火焰文字动画特效和这个HTML5动感的火焰燃烧动画特效就非常炫酷。这次我们要介绍的这款基于HTML5 Canvas火焰动画非常特别,它是带火焰动画的画笔,画笔笔刷在画布上绘制时,线条带有火焰动画,非常不错。

html5-canvas-draw-fire

在线演示源码下载

SVG 和 JavaScript 实现的恶魔眨眼动画

今天要给大家带来一款非常逼真的SVG动画特效,它模拟了一双恶魔的眼睛,并且模拟了不停的眨眼动画。首先这双恶魔眼睛是通过SVG绘制而成,大部分使用了SVG的椭圆路径。然后利用JavaScript让眼睛眨动起来,大家看看效果是不是很逼真有趣。

demon-with-svg-javascript

在线演示源码下载

jQuery/CSS3右下角展开菜单按钮

记得以前给大家分享过一款HTML5/CSS3实现iOS Path菜单,它是从左下角弹出菜单项的,效果非常不错。这次我们带来的这款菜单与之前的类似,是一款基于jQuery和CSS3的右下角展开菜单,点击展开按钮即可从右下角展开菜单项,点击菜单项即可进入相应菜单对应的页面内容。

jquery-css3-expanding-menu

在线演示源码下载

纯CSS3无穷级楼梯台阶动画

今天我们要给大家带来一款很有意思的纯CSS3动画特效。这是一个无穷级的楼梯台阶动画,从视觉角度上看,这个台阶就像是盘旋而上,就像自动扶梯一样可以无穷尽地循环运动。这一个个台阶仅仅是一个个简单的div堆积而成,利用CSS3动画属性让这些div运动起来,从而产生楼梯盘旋而上的视觉效果。

pure-css3-infinite-stairs

在线演示源码下载

JS/CSS实时过滤单词的表格

这是一款基于JavaScript和CSS的单词过滤表格,插件在初始化时会随机生成100000个字符串单词,形成一个数字表格。在输入框中输入字符串时就会实时匹配这100000个单词,符合要求的字符串就会被过滤出来,并且右下角会显示匹配单词的数量,是一个非常实用的应用。

js-css-filter-table

在线演示源码下载

超富创意的纯CSS3下载按钮

这是一款超富创意并且十分可爱的CSS3下载按钮,按钮中有一个通过CSS3绘制而成的下载图标,并且当鼠标悬停在按钮上时,该下载图标会循环播放下载动画。这款CSS3下载按钮在鼠标滑过和离开时均会发生形状的变化,外观上也非常富有创意。

pure-css3-download-button

在线演示源码下载

基于RectJS的文本框字数限制提示动画

今天我们要给大家介绍一款比较实用的网页文本框工具,这个文本框的特点是输入文字时可以实时提示当前文本字数的限制,不仅在右下角显示剩余字数,而且在文本框下方有带颜色的进度条提示。这款文本框字数限制动画基于RectJS和animate.css动画库,引用脚本库后实现非常简单。

rectjs-letter-limit

在线演示源码下载