HTML5 五彩圆环Loading加载动画实现教程
2024-03-20 19:32:06
今天我们要来介绍一款效果很特别的HTML5 Loading加载动画，不像其他的Loading动画，这款Loading动画颜色很丰富，并且在转圈的时候还有淡入淡出的效果。每一个圆环不停地旋转，从而实现加载动画的效果。首先你可以看看效果演示：
你也可以在这里查看在线演示
下面分享一下这款HTML5 Loading动画的实现过程，主要是HTML代码和CSS3代码，以及初始化的JS代码。
首先是HTML代码，只定义一个Loading容器，非常简单。
HTML代码：
<div id=”hold”></div>
接下来是CSS代码，主要是定义每一个圆圈的动画效果：
CSS代码：
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes osc {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity:;
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity:;
}
100% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity:;
}
}
@keyframes osc {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity:;
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity:;
}
100% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity:;
}
}
@-webkit-keyframes rainbow {
0% {
background: #df2020;
}
25% {
background: #80df20;
}
50% {
background: #20dfdf;
}
75% {
background: #7f20df;
}
100% {
background: #df2020;
}
}
@keyframes rainbow {
0% {
background: #df2020;
}
25% {
background: #80df20;
}
50% {
background: #20dfdf;
}
75% {
background: #7f20df;
}
100% {
background: #df2020;
}
}
最后调用JS实现Loading动画的圆圈不停地转动，并且使圆圈的颜色发生周期性的渐变。
JS代码如下：
var num = 7,
ang = 360/num,
rad = num*5; function setup(){
for(var i=0; i<num; i++){
var button = document.createElement('div');
button.className = "dot"+i+" dot";
button.style.top = rad*Math.cos(ang*i*Math.PI/180)-10+"px";
button.style.left = rad*Math.sin(ang*i*Math.PI/180)-10+"px";
button.style.backgroundColor = "hsla("+ang*i+", 50%, 50%, 1)"; button.style.webkitAnimation =
"osc 2s ease-in-out infinite "+i/(num/2)+"s, rainbow 8s infinite "+i/(num/2)+"s";
button.style.animation =
"osc 2s ease-in-out infinite "+i/(num/2)+"s, rainbow 8s infinite "+i/(num/2)+"s, spin 1s infinite"; document.getElementById("hold").appendChild(button);
}
}
怎么样，这款HTML5 Loading动画还不错吧。
另外还有几个不错的Loading动画推荐一下，像这款类似发动机效果的纯CSS3 Loading动画和这款基于jQuery的自定义Loading动画都非常不错。最后提供一下这款HTML5 五彩Loading的源代码：源代码下载>>
最新文章
- C# 利用性能计数器监控网络状态
- bzoj1008快速面
- svn更新操作时提示database is locked
- 密码有效性验证失败。该密码不够复杂，不符合 Windows 策略要求
- 数据访问层DAL(数据库访问抽象类DataProvider)
- （DT系列四）驱动加载中, 如何取得device tree中的属性
- android手电筒开发
- MVC与三层架构的关系
- MySQL 讨厌哪种类型的查询
- EL表达式(3)
- sql时间比较
- nodejs使用connect-mongodb报错（Please ensure that you set the default write concern）
- Linux命令 df du
- Java内存区域与内存溢出异常（JVM学习系列1）
- python学习第四天笔记整理
- Kali学习笔记22：缓冲区溢出漏洞利用实验
- GenericFactoryMethod泛型工厂模式实现简单IOC功能
- AS2 笔记 1——attachMovie 添加库影片
- iOS.-.cxx_destruct
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效 Jquery 中 $('obj').attr('checked',true)失效的几种解决方案