CSS3实现的圆点加载动画

最新推荐文章于 2024-06-07 11:15:24 发布

longWinter666

最新推荐文章于 2024-06-07 11:15:24 发布

阅读量1.4k

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/wu1737149371/article/details/88424144

版权

<!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% {
                o