css3 扩散 |新宋体css

.box {
position: relative;
}
.box::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-radius: 50%;
animation: scale-up 1.5s forwards;
}
@keyframes scale-up {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(3);
opacity: 0;
}
}

上述代码中，大家首先定义了一个.box类，接着在.box类的伪元素:before中添加了一个圆形的背景，并使用border-radius属性将其设置为圆形。然后，大家使用关键帧动画将其从0放大到3，并逐渐透明，从而实现了扩散效果。

值得注意的是，大家在:before中添加了z-index: -1，使其在.box元素下方，从而实现了扩散效果。

在实际应用中，大家可以将扩散效果应用于按钮、文字等元素，以增加页面的动感和活力，使网页更具吸引力。