加载页面（HTML，CSS）油管大佬

最新推荐文章于 2023-02-07 08:00:00 发布

夜ASK

最新推荐文章于 2023-02-07 08:00:00 发布

阅读量281

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_43791139/article/details/106452748

版权

1.简易的转圈圈加载页面

2.HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载页面</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="loading">
        <span>Loading...</span>
    </div>

</body>
</html>

3.CSS代码

body{
    margin: 0;
    padding: 0;
    background: #81cac7;
    height: 100vh;
    /* 元素应该生成的框的类型 */
    display: flex;
    /* 居中对齐弹性盒的各项 元素 */
    align-items: center;
    /* 项目位于容器的中心 */
    justify-content: center;
    font-family: "montserrat",sans-serif;
}

.loading{
    width: 200px;
    height: 200px;
    /* 为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 */
    box-sizing: border-box;
    /* 边框圆角 */
    border-radius: 50%;
    border-top: 10px solid #ffeaa7;
    /* 定位。对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 */
    position: relative;
    animation: a1 2s linear infinite;
}

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

.loading::before{
    border-top: 10px solid #6c5ce7;
    /* 元素的2D或3D转换 */
    transform: rotate(120deg);
}

.loading::after{
    border-top: 10px solid #e84393;
    transform: rotate(240deg);
}

.loading span{
    position: absolute;
    width: 200px;
    height: 200px;
    color: #fff;
    text-align: center;
    line-height: 200px;
    /* linear	动画从头到尾的速度是相同的。 */
    animation: a2 2s linear infinite;
}

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