CSS3实现的圆点加载动画

最新推荐文章于 2024-06-11 10:07:40 发布

longWinter666

最新推荐文章于 2024-06-11 10:07:40 发布

阅读量1.4k

点赞数 2

分类专栏： css 文章标签： css3 前端加载

本文链接：https://blog.csdn.net/wu1737149371/article/details/88424144

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS3加载动画</title>

    <style>
        body {
            overflow: hidden;
            background:#000;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            animation-delay: 1s;
        }

        .item-1 {
            width: 20px;
            height: 20px;
            background: #f583a1;
            border-radius: 50%;
            background-color: #eed968;
            margin: 7px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        @keyframes scale {
            0% {
                transform: scale(1);
            }
            50%,
            75% {
                transform: scale(2.5);
            }
            78%, 100% {
                opacity: 0;
            }
        }
        .item-1:before {
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #eed968;
            opacity: 0.7;
            animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
            animation-delay: 200ms;
            transition: 0.5s all ease;
            transform: scale(1);
        }

        .item-2 {
            width: 20px;
            height: 20px;
            background: #f583a1;
            border-radius: 50%;
            background-color: #eece68;
            margin: 7px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        @keyframes scale {
            0% {
                transform: scale(1);
            }
            50%,
            75% {
                transform: scale(2.5);
            }
            78%, 100% {
                opacity: 0;
            }
        }
        .item-2:before {
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #eece68;
            opacity: 0.7;
            animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
            animation-delay: 400ms;
            transition: 0.5s all ease;
            transform: scale(1);
        }

        .item-3 {
            width: 20px;
            height: 20px;
            background: #f583a1;
            border-radius: 50%;
            background-color: #eec368;
            margin: 7px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        @keyframes scale {
            0% {
                transform: scale(1);
            }
            50%,
            75% {
                transform: scale(2.5);
            }
            78%, 100% {
                opacity: 0;
            }
        }
        .item-3:before {
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #eec368;
            opacity: 0.7;
            animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
            animation-delay: 600ms;
            transition: 0.5s all ease;
            transform: scale(1);
        }

        .item-4 {
            width: 20px;
            height: 20px;
            background: #f583a1;
            border-radius: 50%;
            background-color: #eead68;
            margin: 7px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        @keyframes scale {
            0% {
                transform: scale(1);
            }
            50%,
            75% {
                transform: scale(2.5);
            }
            78%, 100% {
                opacity: 0;
            }
        }
        .item-4:before {
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #eead68;
            opacity: 0.7;
            animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
            animation-delay: 800ms;
            transition: 0.5s all ease;
            transform: scale(1);
        }

        .item-5 {
            width: 20px;
            height: 20px;
            background: #f583a1;
            border-radius: 50%;
            background-color: #ee8c68;
            margin: 7px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        @keyframes scale {
            0% {
                transform: scale(1);
            }
            50%,
            75% {
                transform: scale(2.5);
            }
            78%, 100% {
                opacity: 0;
            }
        }
        .item-5:before {
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #ee8c68;
            opacity: 0.7;
            animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
            animation-delay: 1000ms;
            transition: 0.5s all ease;
            transform: scale(1);
        }
    </style>
</head>
<body>

<div class="container">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
    <div class="item-4"></div>
    <div class="item-5"></div>
</div>

</body>
</html>

效果图

在这里插入图片描述

longWinter666

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现的圆点加载动画

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;CSS3加载动画&lt;/title&gt; &lt;style&gt; body { overflow: hidden;
复制链接

扫一扫

专栏目录