css网页加载的特效代码 |css radio选中

.loader {
display: flex;
justify-content: center;
align-items: center;
}
.loader-inner {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fff;
animation: loader-inner-rotate 1.2s linear infinite;
}
.loader-inner::after {
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #000;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes loader-inner-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

以上代码实现了一个圆形的加载特效。首先，大家创建了一个类名为.loader的容器，并用display:flex;来将其内部元素水平居中。接着，通过在一个名为.loader-inner的子元素上应用CSS属性，大家定义了内部的动画效果，并将其渲染出来。在动画内容的关键帧中，大家定义了0度和360度之间的旋转，以形成一个旋转平移的感觉。

通过使用这种CSS加载特效代码，大家可以让用户在等待网页加载时感到更加美观和满意。当然，大家还可以创造出其他有趣的特效来达到同样的效果。