css3转圈等待

CSS3 转圈等待指的是在网页加载时，通过 CSS3 的动画属性，让网站元素转动，以达到让用户知道网页正在加载的效果。这样可以让用户更好的了解网页加载的情况，避免用户因为等待时间过久而误以为是页面出了问题。下面我们来看一下如何使用 CSS3 转圈等待的效果。

.loader {
    position: relative;
    margin: auto;
    border: .2rem solid rgba(0,.2);
    border-left-color: #eb2026;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spin {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

css3转圈等待

在上面的代码中，我们首先定义了一个.loader 类，通过设置相关 CSS 属性，让其呈现出一个圆形的样式。之后在类中使用了 CSS3 的动画属性，通过设置 -webkit-animation 和 animation 属性进行设置，其中 spin 为自定义动画名称，1s 为动画时间，linear 为动画速度，infinite 为动画无限循环。在@-webkit-keyframes 和 @keyframes 中，我们定义了动画具体的执行方式，即从 0 度到 360 度的旋转动画。

到这里，我们已经实现了一个简单的 CSS3 转圈等待的效果。如果需要更复杂的效果，可以根据需求进行自定义调整。当然，CSS3 转圈等待还可以搭配 JavaScript 等技术一起使用，具体的实现方式可以根据实际情况进行自定义。

css3转圈等待

相关文章