标签归档:HTML5动画

HTML5 Canvas放射线动画

这是一款基于HTML5 Canvas的放射线动画,实现这款动画的思路也比较简单,先是根据数学图形公式构造放射线绘制的路径,然后利用HTML5将射线绘制在Canvas上,并在射线上绘制随机的颜色,这样整个射线图形看上去色彩斑斓。

html5-canvas-radian

在线演示源码下载

HTML5 Canvas实现会跳舞的时间动画

这是一款很有意思的HTML5 Canvas时间动画,总体来说,它是一个可以和客户端同步的时钟,其特点是当时间走动时,数字将会散落成一个个粒子动画,这种HTML5 Canvas动画在之前也有分享过,比如这个HTML5粒子文字特效

html5-canvas-dance-time

在线演示源码下载

纯CSS3实现眨眼动画 超逼真

我们在不久前分享过很多纯CSS3实现的人物和动物动画,每一款动画的效果都非常不错。今天我们要分享一个纯CSS3实现的眨眼动画,其动画效果超级逼真,拿它来做动画人物的眼睛非常适合,这款CSS3眨眼动画完全用CSS3绘制,并没有使用图片。

html5-css3-eyes

在线演示源码下载

来源:FlyLee云飞

HTML5人物跑步动画

记得之前给大家分享过一款HTML5人物行走动画,效果非常震撼。今天要介绍的HTML5动画更加炫酷,是一款基于HTML5的人物跑步动画特效,在这款人物跑步动画中你可以点击按钮来切换人物手中拿的武器,效果非常逼真。

html5-run

核心SVG代码:

<defs>
            <lineargradient id="linearGradient5090">
                <stop style="stop-color: #b38443; stop-opacity: 1;" offset="0" id="stop5092" />
                <stop id="stop5098" offset="0.5" style="stop-color: #694d27; stop-opacity: 1;" />
                <stop style="stop-color: #4f3a1e; stop-opacity: 1;" offset="1" id="stop5094" /[......]

阅读全文>>

HTML5 3D立方体图片切换动画

今天我们要来分享一款HTML5图片切换动画,该HTML5动画主要是将图片分成几个块,切换时每一个块都会以3D立方体的形式过度下一张图片,立方体的打散和聚合动画都非常酷,你可以在JS文件中配置图片的路径和切换的数量,相当灵活。

html5-3d-cube-image-slider

在线演示源码下载

HTML5火球挡板碰撞动画游戏

还记得之前分享的HTML5 Canvas火焰闪烁动画吗,动画效果非常炫酷。今天我们要再来分享一款超酷的HTML5火球挡板碰撞动画游戏。屏幕上有一个火球在不停的运动,你可以移动鼠标滑动屏幕下方的挡板,火球碰撞到挡板后,即可反弹出去,这是个很有特色的HTML5游戏。

html5-breakout-game

在线演示源码下载

3D版HTML5模拟衣服撕扯动画

还记得很早以前向大家分享的这款HTML5 Canvas模拟衣服撕扯动画吗?这绝对是一款非常具有创意而且很好玩的HTML5动画。今天我们来分享一下它的3D版本,在原来的基础上,衣服布料呈3D环形显示,你同样可以用鼠标拖拽衣服,不过和之前不同的是,鼠标左键用来拖拽衣服,鼠标右键用来切割衣服,失去了之前鼠标用力程度和衣服破碎程度的关系,似乎功能上有所缺失,但是HTML5 3D功能还是不错的。

3d-html5-cloth-tear

下面我们来简单分享一下实现的源码,代码主要由HTML和JavaScript组成,主要还是JavaScript。

HTML代码:

<canvas width="800" height="800" id="c"></canvas>

只是定义了一个canvas标签,非常简单。

JavaScript代码:

canvas = document.getElementById('c');
ctx    = canvas.getContext('2d');

//settings
var physics_acc   = 5,
    tear_distance[......]

阅读全文>>

HTML5动感的火焰燃烧动画特效

这又是一款基于HTML5的超炫动画特效,是一款动感的火焰燃烧动画效果。这款HTML5动画火焰燃烧非常逼真,之前我们也分享过一些其他的HTML5火焰燃烧动画,比如:HTML5 Canvas火焰燃烧动画纯CSS3实现打火机火焰动画。一般像这样的HTML5动画都是基于Canvas的,今天的这款也不例外。

html5-cool-fire-effect

接下来我们要简单分析一下实现这款HTML5火焰燃烧动画的具体步骤和代码,主要由HTML代码、CSS代码和Javascript代码组成。

HTML代码:

<div>
<canvas id="surface"></canvas>
</div>

这里我们仅仅是定义了一个canvas容器,我们的火焰效果就是在canvas上绘制而成的。

接下来是CSS代码,也非常简单。

CSS代码:

.wrapper {
  margin: 20px auto;
  text-align: center;
}
canvas {
  width: 100%;
  height: 100%;
}

只是用CSS定义了画布ca[......]

阅读全文>>

HTML5 3D爱心动画 晚来的七夕礼物

七夕情人节刚过,今天小编却在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画,莫非老外也过七夕?当然小编还是将这款HTML5 3D爱心动画收藏了起来,虽是晚来的七夕礼物,但还是可以讲这款爱心动画留到明年七夕再用嘛。大家可以点解DEMO来看看。

html5-3d-heart-animation

这么好看的HTML5爱心动画,我们当然要把源代码分享给大家,下面是小编整理的源代码,主要是HTML代码和CSS代码。

HTML代码:

<div class=’heart3d’>
<div class=’rib1′></div>
<div class=’rib2′></div>
<div class=’rib3′></div>
<div class=’rib4′></div>
<div class=’rib5′></div>
<div class=’rib6′></div>
<div class=’rib7′></div>[......]

阅读全文>>