转圈圈css动画
时间: 2023-07-24 10:14:04 浏览: 51
好的,这里是一个简单的转圈圈 CSS 动画:
```css
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid #ccc;
border-top-color: #007bff;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
```
你可以把这段 CSS 代码应用到一个 HTML 元素上,例如:
```html
<div class="circle"></div>
```
这样就可以在页面上显示一个旋转的圆圈了。
相关问题
css转圈圈加载动画
你可以使用CSS来创建一个转圈圈的加载动画。以下是一个简单的示例:
HTML代码:
```
<div class="spinner"></div>
```
CSS代码:
```css
.spinner {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
```
这段代码会创建一个宽高为40像素的圆形元素,然后使用边框设置圆圈的边框样式。通过`@keyframes`和`animation`属性,我们定义了一个名为"spin"的动画,让圆圈旋转起来。最后,将该动画应用到圆圈元素上。
你可以将这段代码复制到HTML文件中,在浏览器中打开,就能看到圆圈加载动画了。你也可以根据需要调整样式和动画的细节。
css光点围绕边框转圈圈
以下是实现CSS光点围绕边框转圈圈的代码和效果演示:
```html
<div class="container">
<div class="box"></div>
</div>
```
```css
.container {
position: relative;
width: 200px;
height: 200px;
border: 2px solid #fff;
}
.box {
position: absolute;
top: -10px;
left: -10px;
width: 220px; height: 220px;
border: 2px solid transparent;
border-radius: 50%;
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
animation: rotate 4s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg); }
}
```
效果演示:https://codepen.io/pen/?&editable=true&editors=110
--相关问题--:
1. 如何实现CSS动画效果?
2. 如何使用CSS实现边框渐变色?
3. 如何使用CSS实现圆