标签归档:HTML5动画

HTML5房屋装饰工具 自定义房屋各个部位

这是一个基于HTML5和CSS3的房屋装饰工具,工具为房屋的各个部位提供了不同的材料和颜色,点击相应的材料即可将对应部位的材料切换成所选的。这个工具有点类似人物形象换装工具,可以更换人物每个部位的穿着。另外这个工具的知识点在利用CSS3实现3D的动画特效,当你移动鼠标时你可以看到房屋的各个侧面情况。

html5-house-decorator

在线演示源码下载

HTML5 Canvas 五彩发光喷泉动画

前几天我们为大家分享过一款很酷的HTML5 Canvas火焰动画,一起见证了Canvas的强大。这次要分享的这款动画也是基于Canvas实现的,它是一个五彩的发光喷泉动画特效。页面上一共有4个喷泉柱子,并且每个柱子都有在水面上的倒影,喷射出五彩斑斓的喷泉,同喷泉的颜色会随机变化,非常炫酷。

html5-canvas-fountain

在线演示源码下载

HTML5 Canvas雾状火焰动画

我们可以在Canvas上绘制很多图形,也可以利用HTML技术在Canvas上制作一些复杂的动画,之前我们也分享过一些基于HTML5 Canvas的火焰动画,例如这个HTML5 Canvas幻彩火焰文字特效和更早以前分享的HTML5 Canvas火焰燃烧动画。这次我们给大家带来另外一款基于HTML5 Canvas的火焰动画,你可以在Canvas画板上用鼠标点击拖动,便会形成雾状的火焰效果,火焰就像雾霾一样逐渐扩散开来。

html5-canvas-fog-fire

在线演示源码下载

HTML5 Canvas冰川波浪起伏动画

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

html5-canvas-ice-wave

在线演示源码下载

HTML5/CSS3 3D雷达扫描动画

之前我们分享过一款纯CSS3雷达扫描模拟动画,看起来十分炫酷。这次我们分享的另外一款雷达动画更加让人震撼,它是基于HTML5和CSS3实现,它的一大特点是3D立体的视觉效果,鼠标点击雷达后将会展现一张3D立体地图,并且对地图上指定的几个地点进行坐标详细信息描述。

html5-css3-3d-radar-animation

在线演示源码下载

下面我们一起来解析一下这款炫酷的HTML5 3D雷达动画的实现过程。

HTML代码

首先HTML代码非常简单,只需在页面上展示一个div容器即可。

<div class="radar"></div>

CSS代码

这里主要利用了CSS3的旋转等动画特性,看看以下的CSS代码,主要是完成所有的动画:

@-webkit-keyframes flashing {
  0%,
  30% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  70%,
  100% {
    -webkit-transform: scale(0);
            tr[......]

阅读全文>>

HTML5 Canvas火焰文字动画特效

HTML5技术确实挺强大的,特别是Canvas画布更是让网页动画变得丰富多彩。今天我们分享的是一款基于HTML5 Canvas的火焰文字动画特效,它可以让任意文字上方冒出密集的火焰,就像这些文字在熊熊燃烧一样。与这款火焰动画类似的还有以前分享的HTML5 Canvas幻彩火焰文字特效

html5-canvas-fire-text-animation

在线演示源码下载

接下来我们一起来看看如何实现这款炫酷的HTML5 Canvas火焰文字动画特效。

HTML代码

由于是基于Canvas的,所有的动画细节都在Canvas上绘制实现,因此html代码就非常简单,仅仅提供一个canvas元素即可。代码如下:

<canvas id="canvas" width="1024" height="600"></canvas>

别看这简单的一个元素,它结合CSS3和JavaScript可以实现非常复杂的动画。

CSS3代码

CSS代码也没有什么特别,仅仅是定义Canvas的背景颜色:

canvas {
  background-color:#000000;
  left: 0;
}

JavaScript代码

[......]

阅读全文>>

HTML5 Canvas 图片粒子沙漏动画

之前我们分享过很多款炫酷的HTML5 Canvas粒子动画,比如这款HTML5 Canvas 多种炫酷3D粒子图形动画HTML5 Canvas文字粒子动画就都非常不错。这次我们要给大家带来的是一款基于HTML5 Canvas的图片粒子沙漏动画,主要是将一张图片打散成粒子,然后模拟沙漏将图片粒子掉落下来。

html5-canvas-image-flow-time

在线演示源码下载

HTML5/CSS3实现四季更替过渡动画

采用HTML5和CSS3技术我们可以实现很多色彩变幻和情景过渡动画效果,之前分享的这款HTML5 SVG天气预报动画卡片就是一个很不错的例子。这次我们带来的是一款基于HTML5和CSS3的四季更替过渡动画特效,一副简单的森林景象伴随着春夏秋冬四季更替,每一个季节都展现出各自的唯美风景,非常的不错。

html5-css3-animated-seasons

在线演示源码下载

HTML5 密码解锁动画

这是一款基于HTML5和CSS3的密码解锁动画,而且在选取密码时会发出声音,如果密码正确,则会发出胜利的声音。密码选取界面通过CSS3渲染看上去十分华丽,并且可以通过鼠标滑动数字来切换数字密码,也可以通过左右按钮来切换数字。

html5-password-animation

在线演示源码下载

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

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

html5-canvas-3d-model-camera

在线演示源码下载