纯CSS3卡通火车沿轨道行驶动画

自从CSS3流行以来,基于纯CSS3的动画就层出不穷,有纯CSS3的人物动画、纯CSS3按钮动画等。这次,我们给大家分享一个很不错的CSS3卡通火车沿轨道行驶动画,一辆卡通样式的火车缓缓驰过,特别是火车头的动画设计,非常可爱和逼真。

pure-css3-train

在线演示源码下载

CSS3 3D图片层叠切换动画

今天给大家分享一个很不错的CSS3 3D样式的图片层叠切换动画,当鼠标滑过图片后,该图片会被旋转至当前窗口突出显示,其他图片则藏在它的后面,呈现3D立体的视觉效果。更重要的是,鼠标滑过时图片切换十分流畅,用户体验比较不错。

css3-3d-image-switch

在线演示源码下载

JS彩色方块倒计时程序

之前我们分享过几个很不错的jQuery/CSS3倒计时程序,例如CSS3手表倒计时动画 可自定义主题皮肤和这款CSS3倒计时时钟动画。这次我们给大家分享另外一个基于JavaScript的彩色方块倒计时程序,年月日时分秒均采用不同颜色的方块表示,然后数字在方块中不停的更新。

js-color-timer

在线演示源码下载

HTML5 Canvas鼠标移动网格粒子发光动画

近期我们分享了很多关于HTML5 Canvas的炫酷动画,大部分都是粒子相关动画,比如这款HTML5 Canvas鼠标滑过粒子挤压动画HTML5 Canvas 3D绿色粒子动画都非常不错。这次要介绍的同样是一款基于Canvas的HTML5粒子动画,粒子组成一个网格形状,鼠标在网格中移动时,网格粒子跟随鼠标移动,而且鼠标周围将会发光。

html5-canvas-focus-grid

在线演示源码下载

超实用的CSS3横向二级下拉主菜单导航

每一个网站都有自己独特的主菜单导航,样式也是千姿百态,大部分都会使用一些CSS3的技巧来让菜单变得功能更加强大、外观更加绚丽。今天要分享的就是一款基于CSS3的横向下拉二级主菜单导航,它的特点在于菜单项可以定制一个小图标,并且可以展开所属的二级下拉菜单。

css3-hor-dropdown-menu

在线演示源码下载

HTML5 Canvas鼠标滑过粒子挤压动画

粒子动画一直是HTML5 Canvas动画中比较常见的一种,很多开发者也比较喜欢做这一类的动画特效。这次给大家带来一款基于HTML5 Canvas的鼠标滑过粒子挤压动画,页面上有很多粒子点组成一款画布,当你将鼠标滑过这块画布时,粒子之间便相互挤压,让你的鼠标无法触碰这些粒子点。

html5-canvas-extrusion

在线演示源码下载

CSS3可切换背景颜色的日历控件

我们分享过很多基于jQuery和CSS3的时钟和日历插件,样式和功能也都非常丰富,例如这篇文章15个超强悍的CSS3圆盘时钟动画赏析中就总结了很多超级炫酷而且实用的日历时间控件。这次我们给大家带来一款背景可以跟随月份切换而改变的CSS3日历控件,样式简单清新,适合嵌入到自己的个人博客中展示。

css3-calendar-background

在线演示源码下载

CSS3 SVG实现的卡片内容翻转切换动画

之前我们分享过很多关于CSS3实现的卡片动画,比如这个纯CSS3实现可感知方向的卡片翻转动画就非常不错。这次给大家介绍的是一个基于CSS3和SVG的卡片内容翻转切换动画,卡片中的内容可以是任意的HTML代码,例如图片和文字,点击左右的切换按钮后即可将卡片中的内容翻转切换,效果非常不错。

css3-svg-card-rotate

在线演示源码下载

HTML5 Canvas文字放射状线条动画

之前我们分享过很多基于HTML5和CSS3的文字特效,比如最近分享的这款HTML5 Canvas弹性文字动画。今天我们分享的这个文字特效也是基于Canvas实现的,在文字载入的时候,文字由无数放射状的线条组成,形成类似发光的效果。

html5-canvas-text-line-shine

在线演示源码下载

HTML5 Canvas 3D绿色粒子动画

HTML5 Canvas技术已经不是什么新鲜的东西了,在canvas上我们不仅可以结合SVG来绘制各种路径动画,而且更出色的地方在于我们可以结合JavaScript生成很多炫酷的3D动画效果。这次我们给大家分享一款基于HTML5 Canvas的3D绿色粒子动画,效果和之前介绍的HTML5 Canvas和SVG实现的五彩万花筒动画比较类似。但是缺陷在于这个动画在某些版本的chrome上运行比较卡顿。

html5-canvas-3d-green-particle

在线演示源码下载