标签归档:HTML5动画

HTML5/CSS3 3D立方体扭曲动画

之前我们有分享过很多3D的旋转立方体动画,像HTML5 3D立方体旋转动画HTML5 3D正方体旋转动画 很酷的3D特效等等。今天要分享的这款HTML5动画也是和立方体有关,立方体会在不同的角度进行扭曲、放大和缩小,效果非常不错。

html5-animated-cube

在线演示源码下载

HTML5 3D球体斑点运动动画

这是一个很酷的HTML5 3D动画效果,是一个小球,小球表面出现跳动的斑点,斑点跳动时形成各种各样的形状,其实这款动画并不是正宗的HTML5 3D动画,而是利用这些小斑点组合的各种形状造成的3D视觉效果。

html5-psychospher-ball

在线演示源码下载

纯CSS3/HTML5实现3D波浪形动画

今天我们又要来分享一款实现简单的纯CSS3 3D动画效果,这款HTML5/CSS3动画是一个3D波浪形动画特效。利用一堆div加上CSS3对每个div的控制,实现波浪起伏的动画效果。这和之前分享的HTML5/CSS3 3D木块旋转动画的实现方式类似,大家可以参考一下css源代码。

html5-css3-wavy-3d-effect

在线演示源码下载

HTML5/CSS3工厂流水线动画特效

今天我们来分享一款非常具有创意的HTML5/CSS3动画特效,它是一个模拟工厂流水线的动画,烟囱冒着黑烟,屋外的传送带把货物送出去,虽然这个HTML5动画不怎么实用,但还是能很大程度上帮助我们学习HTML5的,大家可以一起来看看。

css3-factory-animation

演示地址源码下载

纯CSS3绘制可爱的小猪、老鼠、小牛

今天来给大家分享一个利用纯CSS3绘制的小猪、老鼠、小牛,非常可爱。利用CSS3的特有属性,可以让网页上的线条组成不同的形状,甚至是产生简单的动画效果。之前也分享过一款纯CSS3绘制可爱的蚱蜢,也是非常酷。CSS3很强大,用纯CSS3可以绘制很多有趣的东西。

css3-pig-mouse-cow

在线演示源码下载

HTML5 Canvas花朵生成器 可生成多种样式的花朵

HTML5非常流行,利用HTML5制作动画也非常方便,今天要分享一款利用HTML5 Canvas制作的花朵生成器,我们只需要在Canvas画布上点击鼠标,即可动态生成各种颜色样式的花朵,并且每一朵花都可以缓慢地旋转,非常炫酷。

html5-canvas-create-flower

在线演示源码下载

用HTML5/CSS3给女朋友送个生日蛋糕

现在有了HTML5,我们在浏览器上制作动画已经不是什么难事了,但是一个好的创意却很难,比如说用技术来博得女孩子的喜欢。今天我们分享的这款生日蛋糕动画非常有创意,它是用svg来做的,利用HTML5的api让制作蛋糕的过程展示出来,这个蛋糕在妹子生日的时候送给她一定会让她觉得很惊奇。祝你成功哦!

html5-css3-new-cake

在线演示源码下载

HTML5/CSS3牙刷动画 模拟真实刷牙效果

今天我们再要来分享一款不错的HTML5/CSS3动画效果,你一个可爱的牙刷,牙刷外观是利用纯CSS3绘制出来的,也比较简单。另外是刷牙动画,看起来非常搞笑,像真的刷牙一样,左刷刷,右刷刷,非常可爱的牙刷动画。

html5-css3-toothbrush

在线演示源码下载

HTML5 Canvas火焰喷射动画效果

还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天我们要来分享一款类似的HTML5动画效果,一款基于HTML5 Canvas火焰喷射动画。用鼠标拖动一条直线,直线长度表示火焰喷射的力度,另外,火焰在运动中还可以反射效果哦。

html5-fire-ball-shooter

在线演示源码下载

HTML5 3D立方体旋转动画

之前我们已经分享一款HTML5 3D正方体旋转动画,可以切换至正方体的任意一面。今天我们再来分享一款绚丽的HTML5 3D立方体旋转动画,这款立方体的色彩看上去非常艳丽,旋转起来的动画效果也十分流畅。是一款很不错的HTML5 3D动画效果。

html5-3d-cube

在线演示源码下载