css3 实现loading效果
2024-09-05 04:03:25
1 圆点渐入渐出
要点： 缩放和透明度的变化,循环变化
<div class="demo1"></div>
.demo1{
width: 40px;
height: 40px;
margin: 0 auto;
border-radius: 100px;
background-color: red;
opacity:;
animation: fadeIn 1s infinite ease-in-out;
}
@-webkit-keyframes fadeIn{
from{
transform: scale(0);
}
to{
transform: scale(1);
opacity:;
}
}
@keyframes fadeIn{
from{
transform: scale(0);
}
to{
transform: scale(1);
opacity:;
}
}
2 线条loading图
要点：使用缩放实现线条的高度的变化，循环变化，使用animation-delay的负值实现动画的连续变化（负值：动画立即执行，从设置的值之后开始执行动画，比如是-1s，表示从动画的1s之后开始执行，前一秒的动画直接跳过，不执行）
html
<div class="demo2">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
</div>
css
.demo2 div{
width: 3px;
height: 20px;
margin-right: 2px;
display: inline-block;
background-color: green;
animation: loading 1.2s infinite ease-in-out;
}
.demo2 .line2{
animation-delay: -1.1s;
}
.demo2 .line3{
animation-delay: -1s;
}
.demo2 .line4{
animation-delay: -0.9s;
}
.demo2 .line5{
animation-delay: -0.8s;
}
@keyframes loading{
0%,40%,100%{
transform: scaleY(.4);
}
20%{
transform: scaleY(1);
}
}
@-webkit-keyframes loading{
0%,40%,100%{
transform: scaleY(.4);
}
20%{
transform: scaleY(1);
}
}
3 旋转圆圈loading
要点：利用边框颜色实现，实现一个圆有一个边的颜色不一样，然后让元素一直循环旋转；
<div class="dem3"></div>
.demo3{
width: 100px;
height: 100px;
border: 3px solid #eee;
border-left-color: #fff;
margin: 100px auto;
border-radius: 100px;
animation: loading1s infinite linear;
}
@keyframes loading{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
最新文章
- 不插网线，看不到IP的解决办法
- 【leetcode】Text Justification（hard) ☆
- 向mysql workbench中导入.sql文件
- java集合练习——Bank
- HTML标签使用特写
- 电脑U盘启动总结
- js获得浏览器页面高宽
- Java多线程 -- 深入理解JMM（Java内存模型） --（五）锁
- 一款jquery小插件：实现轻松获取和绑定编辑表单的值（带源码）
- Notepad++在编程使用时的小技巧
- git操作的各种命令整理
- iOS开发之类扩展
- BZOJ_4804_欧拉心算_欧拉函数
- JetBrains 产品线破解方法
- HTML5标签汇总及知识学习线路总结
- javascript将浮点数转换成整数
- 令人血脉喷张的animate.css
- 测试工作中经常用到的一丢Linux命令
- scala--函数式对象
- POSTMAN接口测试get和post