写一个css动态散光小圆点
时间: 2023-06-04 20:08:47 浏览: 154
好的,我可以为您提供一个实现动态散光小圆点效果的CSS代码:
HTML代码:
```
<div class="container">
<div class="circle"></div>
</div>
```
CSS代码:
```
.container {
position: relative;
width: 300px;
height: 300px;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 5px 2px rgba(255,255,255,0.7), 0 0 10px 5px rgba(255,255,255,0.5), 0 0 20px 10px rgba(255,255,255,0.2), 0 0 40px 20px rgba(255,255,255,0.1), 0 0 80px 40px rgba(255,255,255,0.05);
animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
0% {
width: 10px;
height: 10px;
opacity: 1;
}
50% {
width: 20px;
height: 20px;
opacity: 0.5;
}
100% {
width: 10px;
height: 10px;
opacity: 1;
}
}
```
这段CSS代码实现了一个圆形的小圆点,通过box-shadow的阴影效果,实现了动态散光的效果。同时通过animation实现了动态缩放的效果。您可以将container的宽高调整为适合您需要的大小。