用css画一个暂无数据的精美动画
时间: 2024-04-11 07:26:16 浏览: 14
要用CSS画一个精美的暂无数据动画,可以结合CSS动画和键帧动画来实现。下面是一个示例代码:
HTML:
```html
<div class="no-data">
<div class="animation">
<div class="circle"></div>
<div class="dot"></div>
</div>
<span class="text">暂无数据</span>
</div>
```
CSS:
```css
.no-data {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
}
.animation {
position: relative;
width: 100px;
height: 100px;
animation: rotate 2s infinite linear;
}
.circle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 4px solid #ccc;
}
.dot {
position: absolute;
top: calc(50% - 6px);
left: calc(50% - 6px);
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ccc;
animation: dot-move 2s infinite ease-in-out alternate-reverse;
}
.text {
margin-top: 10px;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@keyframes dot-move {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(40px);
opacity: 0.3;
}
}
```
这段代码会创建一个带有旋转圆圈和移动小点的容器,当数据为空时显示。圆圈通过CSS动画实现旋转效果,小点通过键帧动画实现来回移动的效果。你可以根据需要自定义样式和动画的属性。