HTML5特效动画

hzp666

已于 2024-10-29 08:36:35 修改

阅读量1w

点赞数 12

分类专栏： HTML 文章标签： html5 前端 html

于 2019-05-21 17:06:03 首次发布

原文链接：https://cn.bing.com/search?q=pg%E5%AF%B9%E6%97%A5%E6%9C%9F%E7%9A%84%E6%93%8D%E4%BD%9C&PC=U316&FORM=CHROMN

版权

HTML 专栏收录该内容

131 篇文章

订阅专栏

15.HTML5 WebGL粒子爆炸动画DEMO演示

14.HTML5 Canvas 3D波浪翻滚动画DEMO演示

13.HTML5 Canvas 多种炫酷3D粒子图形动画DEMO演示

12.HTML5 Canvas 图片粒子沙漏动画DEMO演示

11.10款造型奇特的CSS3进度条/Loading动画DEMO演示

10款造型奇特的CSS3进度条/Loading动画

今天我们要分享10款造型奇特的CSS3进度条/Loading动画，这10款进度条应用不仅有创意的外观，而且还有非常特别的动画效果。另外，有些进度条还可以用在Loading动画，效果也挺不错。之前也介绍过一些CSS3进度条和Loading动画，大家可以看看。

10-css3-progress-bar

在线演示源码下载

10.HTML5/CSS3超欢乐的小球跳动Loading动画特效DEMO演示

之前我们分享过一款CSS3 3D小球旋转Loading动画，今天我们要分享的Loading动画特效也和小球有关，不过不是旋转，而是多个小球的跳动动画。这些小球按照一定规律不停的跳动，而且小球有投影，非常有3D立体的感觉，是很有创意的一款CSS3 Loading动画特效。

html5-css3-juggle-loader

在线演示源码下载

9.HTML5 Canvas发光Loading动画DEMO演示

html5-canvas-shine-loading

8. 纯CSS3花瓣样式的Loading加载动画

之前我们分享过很多基于纯CSS3的Loading加载动画，有的是Loading动画小图标，有的是进度条动画，这些在延迟加载的页面和复杂耗时操作上非常实用。这次我们要分享另外一款富有创意的纯CSS3花瓣样式的Loading加载动画，它的外观是一个花瓣形状的小图标，页面加载时花瓣小图标会不停旋转，并且在花瓣下方显示一个进度条。

在线演示源码下载

7、

HTML5 Canvas 鼠标滑过3D动画背景

在网页中我们经常会设置元素的背景，简单点的设置背景颜色，复杂的就设置背景图片。今天给大家分享一个将HTML5 canvas动画作为网页背景的例子，将canvas置于文本底部，canvas上绘制很多3D图形，当我们将鼠标滑过背景时，canvas上的这些3D图形将会翻转，效果很酷。

在线演示源码下载

6、

基于Three.js的碰撞检测穿马路动画

Three.js是JavaScript编写的WebGL第三方库，提供了非常多的3D显示功能。今天要给大家分享的就是一款基于Three.js的穿马路游戏动画，主要使用了Three.js的碰撞检测功能，马路上穿梭着很多车辆，你可以通过方向键控制小方块的行进方向，顺利通过马路，如果方块和行驶的车辆发生碰撞，则游戏结束。