css3动画 圆形扩散 |css3做的发光按钮

/* CSS代码 */
.circle {
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
z-index: 9999;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0);
opacity: 0.0;
}
25% {
transform: scale(0.1);
opacity: 0.3;
}
50% {
transform: scale(0.3);
opacity: 0.6;
}
75% {
transform: scale(0.5);
opacity: 0.1;
}
100% {
transform: scale(1.0);
opacity: 0.0;
}
}

在这段代码中，首先定义了一个宽高为10像素的圆形，然后利用border-radius属性将其变成圆形。接着，使用position属性将其定位到屏幕中央，并使用animation属性设置其动画效果为pulse。

在@keyframes pulse中，定义了从0%到100%的圆形扩散动画，其中transform: scale()属性控制圆形大小的变化，opacity控制圆形透明度。

通过这样的CSS3动画制作，大家可以实现非常炫酷的圆形扩散效果，给网站增添不少视觉冲击力。