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

最新推荐文章于 2024-04-20 02:52:24 发布

marblack

最新推荐文章于 2024-04-20 02:52:24 发布

阅读量304

点赞数

分类专栏： css html

本文链接：https://blog.csdn.net/marblue_y/article/details/97751007

版权

css 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

**效果如下，动态旋转的加载中动画
在这里插入图片描述
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
得到效果如下图

在这里插入图片描述


.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度，形成一个圆。
效果如下

在这里插入图片描述


.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一样
得到如下的静态效果
在这里插入图片描述


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

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

marblack

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【loading...页面动画效果】

**效果如下，动态旋转的加载中动画HTML部分<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>loading</title> <link href="style.css...
复制链接

扫一扫

专栏目录