CSS3自定义loading效果
2024-09-04 15:07:04
效果：
使用CSS3完成loading的制作
css样式:
<style type="text/css">
.mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.1);
} .mask-loading {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
} .mask-loading div {
width: 20px;
height: 20px;
float: left;
margin-right: 5px;
background-color: #0179B5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
} .mask-loading div:nth-child(1) {
-webkit-animation: loading 0.5s ease 0s infinite alternate;
animation: loading 0.5s ease 0s infinite alternate;
} .mask-loading div:nth-child(2) {
-webkit-animation: loading 0.5s ease 0.1s infinite alternate;
animation: loading 0.5s ease 0.1s infinite alternate;
} .mask-loading div:nth-child(3) {
margin-right: 0;
-webkit-animation: loading 0.5s ease 0.2s infinite alternate;
animation: loading 0.5s ease 0.2s infinite alternate;
} @keyframes loading {
from {
/*缩放*/
transform: scale(1);
background-color: lightcoral;
}
to {
transform: scale(0.5);
background-color: #0179B5;
}
} @-webkit-keyframes loading {
from {
transform: scale(1);
background-color: lightcoral;
}
to {
transform: scale(0.5);
background-color: #0179B5;
}
} @-moz-keyframes loading {
from {
transform: scale(1);
background-color: lightcoral;
}
to {
transform: scale(0.5);
background-color: #0179B5;
}
} @-o-keyframes loading {
from {
transform: scale(1);
background-color: lightcoral;
}
to {
transform: scale(0.5);
background-color: #0179B5;
}
}
</style>
HTML:
<body>
<div class="mask">
<div class="mask-loading">
<div></div>
<div></div>
<div></div>
<p>Loading...</p>
</div>
</div>
</body>
最新文章
- Hive的三种安装方式（内嵌模式，本地模式远程模式）
- Cocopod上更新上传自己的开源框架供别人下载
- Metasploit辅助模块
- tiled工具使用
- 传说中的WCF（5）：数据协定（a）
- JDK1.8聚合操作
- java学习之异常笔记
- Flex上传文件
- read gc log
- VB.NET中的常用方法
- web移动端Fixed在Input获取焦点时ios下产生的BUG及处理
- [2019BUAA软工助教]第0次个人作业
- CF1139E Maximize Mex
- Git创建本地仓库、与远程仓库关联
- tmux用法【常用】
- JS读取.properties文件的方法
- ios学习--iphone 实现下拉菜单
- Linux中搭建一个ftp服务器详解
- vue组件知识点
- Alpha答辩总结