手写菊花loading背景,不需要转圈,内部的线条需要很多个
时间: 2023-09-19 16:08:13 浏览: 64
要实现菊花loading的效果,可以使用CSS3的旋转和边框属性。以下是一个简单的手写菊花loading的实现:
```html
<div class="loading">
<div class="spinner"></div>
</div>
```
```css
.loading {
width: 500px;
height: 500px;
position: relative;
background-color: #f3f3f3;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 2px solid #dadada;
border-radius: 50%;
}
.spinner:before, .spinner:after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 40%;
background-color: #000;
animation: spinner 2s infinite ease-in-out;
}
.spinner:before {
transform-origin: 0 100%;
}
.spinner:after {
transform-origin: 0 0;
}
@keyframes spinner {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(360deg);
}
}
```
在上述代码中,我们使用了一个div元素作为loading的容器,并设置了宽高为500px,背景为灰色。接着,我们使用了一个div元素作为菊花loading的背景,并设置了边框为2px的灰色圆形,使用伪元素:before和:after来表示菊花loading内部的线条。这里使用了CSS3的旋转和边框属性来实现。
最后,我们使用了@keyframes来定义线条的动画,使其旋转起来。这里使用了transform-origin来设置旋转中心点,使旋转的效果更加自然。
这样,就可以实现手写的菊花loading背景效果了。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)