css3-loading效果

最新推荐文章于 2025-05-18 09:40:35 发布

github_34514750

最新推荐文章于 2025-05-18 09:40:35 发布

阅读量751

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css3 loading

本文链接：https://blog.youkuaiyun.com/github_34514750/article/details/51866794

css 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何使用CSS3创建一个五圆圈的loading效果。首先，设置父容器为绝对定位并使其居中；接着，创建五个带有border-radius的div，让它们排列成一行；最后，通过给每个子元素添加缩放动画和延迟，实现了依次加载的视觉效果。详细代码和示例可在GitHub找到。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

5个圆圈loading图
这里写图片描述

1.父容器container

绝对定位父元素在屏幕中间

2.子元素div

画出五个div,设置border-radius，然后内联变成一行

3.子元素div动画

每个子元素放大缩小，但是依次给个动画延迟，则是很好的loading效果

https://github.com/wanghuanweb/wanghuan.github.io/tree/master/css/css3%E5%8A%A8%E7%94%BB%E8%AE%BE%E8%AE%A1/css3%20loading%E5%9B%BE

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <link href="index.css" rel="stylesheet">
    </head>

    <body>
        <div class="container">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </body>
</html>

*{
    margin: 0px;
    padding: 0px;
}

html,body{
    height: 100%;
}

.container{
    position: absolute;
    top: 50%;
    left: 50%;
}

.dot{
    width: 24px;
    height: 24px;
    border-radius: 12px;
    display: inline-block;

    -webkit-animation: move 1s infinite;
    -moz-animation: move 1s infinite;
    -o-animation: move 1s infinite;
    animation: move 1s infinite;
}

.dot:nth-child(1){
    animation-delay: 0.1s;
    background: #32aacc;
}

.dot:nth-child(2){
    animation-delay: 0.2s;
    background: #64aacc;
}

.dot:nth-child(3){
    animation-delay: 0.3s;
    background: #96aacc;
}

.dot:nth-child(4){
    animation-delay: 0.4s;
    background: #c8aacc;
}

.dot:nth-child(5){
    animation-delay: 0.5s;
    background: #faaacc;
}

@-webkit-keyframes move {
    0%{
        -webkit-transform: scale(1);
        -webkit-opacity: 1;
    }
    50%{
        -webkit-transform: scale(2);
        -webkit-opacity: 0.5;
    }
    100%{
        -webkit-transform: scale(1);
        -webkit-opacity: 1;
    }
}

@-moz-keyframes move {
    0%{
        -moz-transform: scale(1);
        -moz-opacity: 1;
    }
    50%{
        -moz-transform: scale(2);
        -moz-opacity: 0.5;
    }
    100%{
        -moz-transform: scale(1);
        -moz-opacity: 1;
    }
}

@-o-keyframes move {
    0%{
        -o-transform: scale(1);
        -o-opacity: 1;
    }
    50%{
        -o-transform: scale(2);
        -o-opacity: 0.5;
    }
    100%{
        -o-transform: scale(1);
        -o-opacity: 1;
    }
}

@keyframes move {
    0%{
        transform: scale(1);
        opacity: 1;
    }
    50%{
        transform: scale(2);
        opacity: 0.5;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}