css3 加载中效果 |css选取radio

html,body{
height: 100%;
}
.loading{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: rgba(255, 255, 255, 0.8);
width: 150px;
height: 150px;
border-radius: 50%;
text-align: center;
line-height: 150px;
color: #333;
animation: loading 1.5s ease-in-out infinite;
}
@keyframes loading{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg)
}
}

首先，大家需要将html和body的高度设置为100%，以便大家可以在页面上设置一个尺寸和位置。接下来，大家创建一个名为“loading”的class，它将使用绝对定位属性来定位在页面中心，并使用transform: translate(-50%, -50%);将其水平和垂直居中。其背景颜色设置为半透明白色，然后设置它的宽度和高度为150像素，并将其设置为圆圈形状。大家在圆圈中加入文字，并将其通过line-height垂直居中。最后大家使用CSS3动画设置旋转效果。

在CSS3加载中效果的实现中优势特别明显。这个特效不仅减少了加载时间的焦躁感，增加了页面流畅度;同时提高了页面的整体质感；让访问者有更好的视觉体验。使用这样的效果既可以增加页面的乐趣性，也方便了用户，为网站提升使用体验。