标签归档：HTML5动画

HTML5 Canvas 3D波浪翻滚动画

7,054 人浏览

2017-11-20 21:24:53

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

在线演示源码下载

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

6,158 人浏览

发表回复

2017-11-13 08:24:25

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

在线演示源码下载

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

18,474 人浏览

发表回复

2017-11-08 21:35:37

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

在线演示源码下载

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

5,736 人浏览

发表回复

2017-11-04 14:24:42

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

在线演示源码下载

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

22,925 人浏览

发表回复

2017-10-17 22:20:09

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

在线演示源码下载

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

12,229 人浏览

发表回复

2017-10-02 19:38:04

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