【loading...页面动画效果】

客官°小女子只卖身不卖艺 2021-11-16 07:24 729阅读 0赞

\*\*效果如下，动态旋转的加载中动画  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcmJsdWVfeQ_size_16_color_FFFFFF_t_70]  
HTML部分

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>loading</title>
            <link href="style.css" rel="stylesheet">
        </head>
        <body>
            <div class="loading">
                <span>loading...</span>
            </div>
        </body>
    </html>

设置一个div，class名为loading  
然后在其中设置行内元素span，方便设置文字部分的loading…

CSS部分

**body{
        margin: 0px;
        padding: 0px;
        background-color: #30336b;
        height: 100vh; 
        display: flex;
        align-items: center;
        justify-content: center;

运用了flex布局  
**align-items: center** 定义了flex子项在纵轴上的对齐方式为居中对齐。  
**justify-content: center;** 定义flex子项在横轴上的对齐方式为居中对齐  
**height：100vh**; 1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度的百分之一。

.loading{
        width: 200px;
        height: 200px;
        box-sizing: border-box; 
        border-radius: 50%;
        border-top:10px solid #eb4d4b;
        position: relative;
        animation: 2s a1 linear infinite;
    }

将div元素宽高均设置为200px，得到一个位于页面正中央的正方形  
box-sizing: border-box; 为元素设置的宽和高，包括了内外边距  
border-radius: 50%; 设置边框为圆角  
border-top:10px solid \#eb4d4b; 设置顶部边框属性，宽度10px 实线 颜色值  
animation: 2s a1 linear infinite; 设置动画属性，动画无线循环播放，周期2s  
得到效果如下图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcmJsdWVfeQ_size_16_color_FFFFFF_t_70 1]

.loading::after,.loading::before{
        content: '';
        width: 200px;
        height: 200px;
        position: absolute;
        left: 0px;
        top: -10px;
        box-sizing: border-box;
        border-radius: 50%;
    }

.loading::after{
        transform: rotate(120deg);
        border-top:10px solid #686de0;
    }
    .loading::before{
        transform: rotate(240deg);
        border-top:10px solid #f0932b;
    }

运用伪元素在loading前后添加内容，大致上和loading差不多，再稍微调整位置。  
然后将两个伪元素设置transform属性，一个旋转120度，一个旋转240度，形成一个圆。  
效果如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcmJsdWVfeQ_size_16_color_FFFFFF_t_70 2]

.loading span{
        position: absolute;
        width: 200px;
        height: 200px;
        text-align: center;
        line-height: 200px;
        color: aliceblue;
        animation: 2s a2 linear infinite;
    }

设置行内元素span，将行间距设置为与盒子高度一样的200px，使在设置text-align时可以用center将文字居中在盒子正中。  
animation: 2s a2 linear infinite;设置动画属性，与前面的a1一样  
得到如下的静态效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcmJsdWVfeQ_size_16_color_FFFFFF_t_70 3]

@keyframes a1{
        to{
            transform: rotate(360deg);
        }
    }
    @keyframes a2{
        to{
            transform: rotate(-360deg);
        }
    }

最后，设置a1旋转360度的动画  
设置a2旋转-360度的动画（这样文字部分的loading…就不会旋转，只会轻微平移）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcmJsdWVfeQ_size_16_color_FFFFFF_t_70]: /images/20211116/20f0748d8f1a4ef58b9f4c3a30c44835.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcmJsdWVfeQ_size_16_color_FFFFFF_t_70 1]: /images/20211116/41b726a8e10d4cfab8ba48fe7a3693eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcmJsdWVfeQ_size_16_color_FFFFFF_t_70 2]: /images/20211116/ee78ae37594e4d728123b38af2896906.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hcmJsdWVfeQ_size_16_color_FFFFFF_t_70 3]: /images/20211116/0056f78912004750b3ce1e0c630ce60a.png