技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

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

作者:admin    时间:2022-3-16 16:29:50    浏览:

本文介绍一个纯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值分别为div1div2

每个DIV里面有4个span标签,它们的class值依次为span1span2span3span4

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;是定义动画执行时间为1slinear是表示匀速进行,infinite是表示循环执行。

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

总结

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

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

x
  • 站长推荐
/* 左侧显示文章内容目录 */