博客

css加载动画，loading，前端

  • Post author:
  • Post category:其他


效果：
loading 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>loading1</title>
    <style>
        .container{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            /* background-color: skyblue; */
            filter: url("#goo");
            animation: rotate_move 3s ease infinite;
        }
        /* 绘制三个圆，最开始圆在容器中间 */
        .dot{
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-color: beige;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        /* 为三个圆分别添加不同的背景色 */
        .dot_3 {
            background-color: #f74d75;
        }
        .dot_2 {
            background-color: #10beae;
        }
        .dot_1 {
            background-color: #ffe386;
        }

        /* 分别为三个圆定义动画 */
        .dot_3 {
            background-color: #f74d75;
            animation: dot_3_move 3s ease infinite;
        }
        .dot_2 {
            background-color: #10beae;
            animation: dot_2_move 3s ease infinite;
        }
        .dot_1 {
            background-color: #ffe386;
            animation: dot_1_move 3s ease infinite;
        }
        @keyframes dot_3_move {
            20% {
                transform: scale(1)
            }

            45% {
                transform: translateY(-18px) scale(.45)
            }

            60% {
                transform: translateY(-90px) scale(.45)
            }

            80% {
                transform: translateY(-90px) scale(.45)
            }

            100% {
                transform: translateY(0px) scale(1)
            }
        }
        @keyframes dot_2_move {
            20% {
                transform: scale(1)
            }

            45% {
                transform: translate(16px, 12px) scale(.45)
            }

            60% {
                transform: translate(80px, 60px) scale(.45)
            }

            80% {
                transform: translate(80px, 60px) scale(.45)
            }

            100% {
                transform: translateY(0px) scale(1)
            }
        }
        @keyframes dot_1_move {
            20% {
                transform: scale(1)
            }
            45% {
                transform: translate(-16px, 12px) scale(.45)
            }

            60% {
                transform: translate(-80px, 60px) scale(.45)
            }

            80% {
                transform: translate(-80px, 60px) scale(.45)
            }

            100% {
                transform: translateY(0px) scale(1)
            }
        }

        /* 接下来就是旋转圆，这里也可以旋转容器，但需要等到三个圆到达各自最远点才能开始旋转容器 */
        @keyframes rotate_move {
            55%{
                transform: translate(-50%,-50%) rotate(0deg);
            }
            /* 此处80%与圆的80%要对应，即圆在80%到达最远处，此时开始旋转*/
            80%{
                transform: translate(-50%,-50%) rotate(360deg);
            }
            100%{
                transform: translate(-50%,-50%) rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7" />
          </filter>
        </defs>
    </svg>      
    <div class="container">
        <div class="dot dot_1"></div>
        <div class="dot dot_2"></div>
        <div class="dot dot_3"></div>
    </div>
</body>
</html>

注：参考https://blog.csdn.net/p1967914901/article/details/126209717?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167703649016800225574819%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167703649016800225574819&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2

blog

first_rank_ecpm_v1~rank_v31_ecpm-1-126209717-null-null.article_score_rank_blog&utm_term=%E5%8A%A0%E8%BD%BD&spm=1018.2226.3001.4450


版权声明：本文为weixin_44694230原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。