标签归档:HTML5动画

HTML5 Canvas 房间3D模型动画 可读取麦克风和摄像头

这是一款基于HTML5 Canvas的3D房间模拟动画,房间里有电视机、沙发、书柜、灯具以及一个人物模型,这些模型都是在Canvas上绘制而成。更重要的是,这款3D动画可以利用HTML5特性读取本地麦克风和摄像头,这样就可以通过摄像头将你自己投影到电视机上,看上去挺神奇的。

html5-canvas-3d-model-camera

在线演示源码下载

HTML5/CSS3 3D立方体拼图 支持方向键旋转

之前我们分享过不少基于HTML5/CSS3和Canvas的3D立方体旋转动画,比如这款超绚丽CSS3多色彩发光立方体旋转动画,也有基于立方体做的菜单应用,比如超实用CSS3 3D菜单 菜单项悬浮凸出立体效果。今天我们要分享的是一款基于HTML5和CSS3的3D立方体拼图应用,一共有8个小立方体组成的3D拼图,我们可以点击立方体或者方向键完成拼图,同时我们也可以让立方体保持旋转。

html5-css3-3d-cube-puzzle

在线演示源码下载

基于HTML5 WebGL的3D星云动画特效

今天我们给大家分享一个基于HTML5 Canvas的星云动画特效,整个画面模拟了一个星系的外观,比如模拟了太阳系,有很多小行星围绕着星系中心旋转,星系中心也显得格外亮丽。这些小星点都是在Canvas上绘制而成,同时我们还可以拖拽鼠标从不同视角观看星云,非常大气。

html5-webgl-galaxy

在线演示源码下载

HTML5 Canvas 多种炫酷3D粒子图形动画

在不久之前,我们分享过好几款基于HTML5 Canvas的粒子动画特效,都比较炫酷,比如这款HTML5 WebGL绚丽五彩流体模拟动画HTML5 WebGL粒子爆炸动画。这次我们同样要分享另外一款HTML5 Canvas 多种炫酷3D粒子图形动画,与前面的类似,它也是利用HTML5的粒子特性绘制出各种3D外观的图形,有3d球形、3d圆环、3d沙漏形等,视觉效果都非常不错。

html5-canvas-3d-pixel-graph

在线演示源码下载

HTML5 Canvas 3D波浪翻滚动画

之前我们分享过好几款基于HTML5 Canvas的波浪和水波纹动画,比如这款HTML5 3D波浪起伏动画特效和这款超酷无比的HTML5 WebGL水面水波荡漾特效。今天我们要介绍一款也是基于HTML5 Canvas的波浪翻滚动画,它同样有着3D立体的视觉效果,同时波浪在起伏时也伴随的浪花汹涌的动画特效,看上去非常炫酷。

html5-canvas-3d-wave

在线演示源码下载

HTML5 Canvas闪亮的3D蓝宝石动画

几天前,我们向大家分享过一款基于HTML5 Canvas的3D钻石动画,制作得十分逼真。今天我们要分享另外一个基于HTML5 Canvas的3D蓝宝石动画,我们可以通过鼠标的拖拽来实现蓝宝石的各个视角的观察,并且通过鼠标滚轮来缩放宝石的大小,同时蓝宝石的表面会不时地发出闪亮的光芒,不得不说,Canvas在网页绘制方面真的是无所不能。

html5-canvas-3d-sapphire

在线演示源码下载

8款炫酷HTML5 Canvas星空背景动画

今天我们要给大家分享一个基于HTML5 Canvas的星空背景动画,动画主要模拟了星空背景快速运动的视觉效果。只要我们将鼠标滑过星空,星空就会加速运动,看上去非常炫酷。同时,一共有8种不同的星空动画,我们可以将这款动画用作自己的博客背景。

html5-canvas-star-animation

在线演示源码下载

HTML5/SVG运动模糊动画 支持焦点图、弹出层和菜单

这次要分享的是一种基于HTML5和SVG的运动模糊的动画效果,比如在焦点图插件中图片切换时候的模糊效果,弹出层弹出时的模糊效果,还有下拉菜单展开收缩时的模糊效果。大部分我们使用CSS3的模糊属性以及HTML5实现的运动算法,让图片、菜单等元素实现在运动中的模糊动画特效,为了让运动模糊效果更加逼真,我们需要选择一个比较合理的运动算法公式。

html5-svg-motion-blur-effect

在线演示源码下载

HTML5 Canvas高空瀑布下落湖面动画

HTML5 Canvas是一个神奇的网页技术,我们在Canvas画布上可以做任何有趣的事情。今天要分享的这款瀑布动画就是利用了HTML5 Canvas的相关特性实现的。记得我们在很早以前给大家介绍过一个超逼真的HTML5瀑布动画,也是在Canvas上完成的,非常酷。今天的这个瀑布更加美妙,因为它模拟了整个瀑布落入湖面的美妙景象,但是从逼真度上来说,还是稍微有待改进,不过个人觉得已经非常不错了。

html5-canvas-waterfall-lake

在线演示源码下载

HTML5 SVG实现会跳舞的花朵 4种跳舞心情

这又是一款很有趣的HTML5 SVG动画,它是一朵会跳舞的花。首先,花朵和花盆均采用SVG进行绘制,虽然是简单的线条以及单纯的颜色,但是绘制出的效果还是相当逼真的。接下来是给花朵进行跳舞动画的渲染,结合CSS3的动画属性以及JavaScript的动态渲染,让这朵花赋予了4种不同心情下的跳舞动画,点击按钮即可切换当前心情下的跳舞动画,真的是非常可爱。

html5-svg-dancing-flower

在线演示源码下载