css实现一个页面loading的动画

最新推荐文章于 2023-07-11 11:07:51 发布

545龙哥哥

最新推荐文章于 2023-07-11 11:07:51 发布

阅读量501

点赞数

分类专栏：龙哥哥前端笔记可能用到的小组件文章标签： loading 加载中动画

本文链接：https://blog.csdn.net/longgege001/article/details/82564177

版权

龙哥哥前端笔记同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

可能用到的小组件

2 篇文章 0 订阅

订阅专栏

loading loading

有点笨，不会生成gif图，效果就是那两张图片中的黑点点，会按顺序从无到有，形成一种loading的感觉。
完整代码如下，可直接复制看效果~

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    #choiceness-loading {
        height: 400px;
        width: 400px;
        margin: 100px auto;
        position: relative;
    }
    .content1,
    .content2 {
        width: 15%;
        height: 15%;
        position: absolute;
        left: 35%;
        top: 100px;
    }
    .content1 div,
    .content2 div {
        width: 25%;
        height: 25%;
        background: #000;
        border-radius: 50%;
        position: absolute;
        animation: move 2s infinite linear
    }
    .content2 {
        transform: rotate(45deg)
    }
    .circle1 {
        left: 0;
        top: 0;
    }
    .circle2 {
        right: 0;
        top: 0
    }
    .circle3 {
        right: 0;
        bottom: 0
    }
    .circle4 {
        left: 0;
        bottom: 0
    }
    .content1 .circle1 {
        animation-delay: -0.1s
    }

    .content2 .circle1 {
        animation-delay: -0.3s
    }
    .content1 .circle2 {
        animation-delay: -0.5s
    }
    .content2 .circle2 {
        animation-delay: -0.7s
    }
    .content1 .circle3 {
        animation-delay: -0.9s
    }
    .content2 .circle3 {
        animation-delay: -1.1s
    }
    .content1 .circle4 {
        animation-delay: -1.3s
    }
    .content2 .circle4 {
        animation-delay: -1.5s
    }
    @keyframes move {
        0% {
            transform: scale(1)
        }
        50% {
            transform: scale(0)
        }
        100% {
            transform: scale(1)
        }
    }
</style>
<body>
    <div id="choiceness-loading">
        <div class="content1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="content2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
</body>
</html>

545龙哥哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css实现一个页面loading的动画

有点笨，不会生成gif图，效果就是那两张图片中的黑点点，会按顺序从无到有，形成一种loading的感觉。完整代码如下，可直接复制看效果~&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;style...
复制链接

扫一扫