HTML5 3D 陨石火球动画

今天要分享的又是一个基于HTML5 Canvas的炫酷动画,这是一个3D的陨石火球动画。从外观上看,这就像一颗正在坠落的陨石火球,还拖着一条长长的火焰尾巴。同时,我们可以通过拖拽鼠标从不同的视角来看这颗火球,并且可以通过鼠标滚轮来放大缩小火球,这便让人产生了不错的3D视觉效果。另外,右上角可以展开一个控制面板,允许你设置火球的颜色、大小、阴影等参数。

html5-canvas-toon-fireball

在线演示源码下载

可切换的精美CSS3登录注册表单

这是一个比较实用的CSS3登录注册表单插件,它可以允许用户在同一页完成注册或者登录操作,只要点击登录或者注册按钮即可以快速切换到相应的页面。另外这款CSS3登录注册表单背景非常特别,表单内部的背景和网页整体的背景,在功能切换时显得非常贴切,而且还有3D立体的视觉效果。大家可以修改注册登录表单项即可为自己的项目定义一个不错的登录注册功能页面。

css3-login-reg-form

在线演示源码下载

基于 D3.js 的 SVG化学元素周期表动画

这是一个使用SVG和基于D3.js脚本库实现的化学元素周期表动画,这张表中列出了所有的化学元素简称及其分子量大小,并按分子量大小和元素类型排序。这张元素周期表和你在中学化学学到的相比,元素列的更为全面,并且他的特点是按照元素的状态,使用不同的颜色或者动画区分出来,比如气态元素会有气体流动动画,十分形象。

html5-svg-periodic-table

在线演示源码下载

纯CSS3 3D乒乓球比赛动画

这是一个使用CSS3实现的3D乒乓球比赛动画,场面效果令人震撼,最关键的是,这个动画并没有使用一行JS代码,而是全部用HTML和CSS实现。画面中的乒乓球桌、球拍以及乒乓球都是通过CSS3绘制而成,包括球桌的阴影和乒乓球运动时的投影,3D效果表现得非常逼真。唯一不足的是,没有将比赛的队员表现出来,否则就真是完美了。

pure-css3-table-tennis

在线演示源码下载