loading效果
时间: 2023-08-18 08:16:36 浏览: 41
loading效果可以通过多种方式实现,其中比较常见的方式是使用CSS动画或JavaScript实现。以下是一个简单的CSS动画例子:
```html
<div class="loading">
<div></div>
<div></div>
<div></div>
</div>
```
```css
.loading {
display: flex;
justify-content: center;
align-items: center;
}
.loading div {
width: 10px;
height: 10px;
margin: 0 5px;
background-color: #000;
border-radius: 50%;
animation: loading 1s ease-in-out infinite;
}
.loading div:nth-child(2) {
animation-delay: 0.1s;
}
.loading div:nth-child(3) {
animation-delay: 0.2s;
}
@keyframes loading {
0% {
transform: scale(0);
opacity: 0.7;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0.7;
}
}
```
这段代码实现了一个三个小圆点的loading效果,通过CSS动画实现了它们的旋转和缩放。可以通过调整CSS样式来改变loading效果的颜色、大小、形状等。