css3 loading加载动画圆形/圆周滚动效果【演示/源码下载】

本文介绍一个纯CSS3实现的loading加载动画，是一个圆形滚动的效果。

demodownload

HTML

<div class="div1">
    <span class="span1"></span>
    <span class="span2"></span>
    <span class="span3"></span>
    <span class="span4"></span>
</div>
<div class="div2">
    <span class="span1"></span>
    <span class="span2"></span>
    <span class="span3"></span>
    <span class="span4"></span>
</div>

HTML结构有两个DIV标签，它们的class值分别为div1和div2。

每个DIV里面有4个span标签，它们的class值依次为span1、span2、span3、span4。

CSS

div {
    position: absolute;
    top: 200px;
    left: 500px;
    width: 50px;
    height: 50px;

}

div span {
    display: inline-block;
    height: 10px;
    width: 10px;
    background-color: red;
    position: absolute;
    border-radius: 50%;
}

.div2 {
    transform: rotate(45deg);
}

@keyframes dh {
    0% {
        transform: scale(0.5);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(0.5);
    }
}

div span {
    animation: dh 1s linear infinite;
}

.div1 .span1 {
    left: 0;
    top: 0;
    animation-delay: 0s;
}

.div2 .span1 {
    left: 0;
    top: 0;
    animation-delay: 0.125s;
}

.div1 .span2 {
    top: 0;
    right: 0;
    animation-delay: 0.25s;
}

.div2 .span2 {
    top: 0;
    right: 0;
    animation-delay: 0.375s;
}

.div1 .span3 {
    bottom: 0;
    right: 0;
    animation-delay: 0.5s;
}

.div2 .span3 {
    bottom: 0;
    right: 0;
    animation-delay: 0.625s;
}

.div1 .span4 {
    bottom: 0;
    left: 0;
    animation-delay: 0.75s;
}

.div2 .span4 {
    bottom: 0;
    left: 0;
    animation-delay: 0.875s;
}

div定义圆的大小，该实例圆的高(height)、宽(width)均为50px。

div span {}定义滚动小圆的大小、颜色等样式。

transform: rotate(45deg);是定义动画转动45度。

transform: scale(n); 是定义动画缩小或放大n倍。

animation: dh 1s linear infinite;是定义动画执行时间为1s，linear是表示匀速进行，infinite是表示循环执行。

animation-delay表示动画延迟执行时间。实例里有8个span，表示有8个小圆，使用animation-delay属性，让不同圆在不同时间运行动画，从而从整体视觉上看似整个大圆在做圆周滚动。

总结

本文介绍了一个css3实现的loading加载动画圆形滚动效果，实例主要使用了animation等动画属性来实现。animation是css3实现动画的主要属性，你可以用它来轻松实现各种实用的动画，参看此文《详解 CSS3 animation 6个动画属性》了解更多。

您可能对以下文章也感兴趣

• 纯CSS实现的转动的圆环加载动画
• CSS loading加载动画(旋转的圆环)
• CSS3 loading预加载动画旋转的圆弧【演示/源码下载】
• 4个漂亮的CSS3 Loading预加载动画实例
• CSS3 Loading 旋转圆盘加载动画
• CSS3 loading音波效果预加载动画
• CSS3 Loading预加载动画8个常见实例
• CSS Loading 左右滚动加载动画等5实例【源码下载】