css写一个六瓣花瓣的loading
时间: 2023-09-13 07:07:32 浏览: 39
```html
<div class="loading">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
</div>
```
```css
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.petal {
width: 10px;
height: 30px;
border-radius: 50% 50% 0 0;
background-color: #ff69b4;
transform-origin: bottom;
animation: petal 1s ease-in-out infinite;
}
.petal:nth-child(1) {
animation-delay: 0s;
}
.petal:nth-child(2) {
animation-delay: 0.2s;
}
.petal:nth-child(3) {
animation-delay: 0.4s;
}
.petal:nth-child(4) {
animation-delay: 0.6s;
}
.petal:nth-child(5) {
animation-delay: 0.8s;
}
.petal:nth-child(6) {
animation-delay: 1s;
}
@keyframes petal {
0% {
transform: scaleY(1) rotate(0deg);
}
50% {
transform: scaleY(0.2) rotate(180deg);
}
100% {
transform: scaleY(1) rotate(360deg);
}
}
```