用css写3个loading风格
时间: 2024-04-29 19:21:09 浏览: 6
1. 旋转圆圈
```
.loading {
display: inline-block;
width: 40px;
height: 40px;
border: 4px solid #f2f2f2;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
```
2. 跳动小球
```
.loading {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.loading:before, .loading:after {
content: "";
position: absolute;
top: 0;
}
.loading:before {
left: -20px;
width: 20px;
height: 80px;
border-radius: 50% 0 0 50%;
background-color: #3498db;
animation: bounceLeft 1s ease-in-out infinite;
}
.loading:after {
left: 20px;
width: 20px;
height: 80px;
border-radius: 0 50% 50% 0;
background-color: #f2f2f2;
animation: bounceRight 1s ease-in-out infinite;
}
@keyframes bounceLeft {
0%, 100% { transform: scale(0.0); }
50% { transform: scale(1.0); }
}
@keyframes bounceRight {
0%, 100% { transform: scale(0.0); }
50% { transform: scale(1.0); }
}
```
3. 打字机效果
```
.loading {
display: inline-block;
font-size: 20px;
color: #3498db;
font-family: monospace;
white-space: nowrap;
overflow: hidden;
border-right: .15em solid #3498db;
animation: typing 2s steps(40, end) infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
```