css3写一个加载动画

IT技术2年前 (2022)更新 IT大王

0 60

先制作一个正方形，让圆点在正方形的最外侧

<style>
body {
    margin: 0;
}
.loading {
    width: 200px;
    height: 200px;
    background: skyblue;
    margin: 100px auto 0px;
    position: relative;
}
.loading .item {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: pink;
    position: absolute;
    /* left：50%是指的左边的点的位置在中间 第一个圆点在最顶部 */
    left: 50%;
    top: 0px;
    margin-left: -10px;
    /* 基准点 */
    transform-origin: 10px 100px;
}
//第二个圆点
.loading .item:nth-child(2) {
    transform: rotate(40deg);
}
//第三个圆点
.loading .item:nth-child(3) {
    transform: rotate(80deg);
}
</style>
<body>
    <div class="itdwcnwqseo loading">
        <div class="itdwcnwqseo item"></div>
        <div class="itdwcnwqseo item"></div>
        <div class="itdwcnwqseo item"></div>
        <div class="itdwcnwqseo item"></div>
        <div class="itdwcnwqseo item"></div>
        <div class="itdwcnwqseo item"></div>
        <div class="itdwcnwqseo item"></div>
        <div class="itdwcnwqseo item"></div>
        <div class="itdwcnwqseo item"></div>
    </div>
</body>

借助 rotate 让9个圆点在正方形的四周

<style>
    body {
        margin: 0;
    }
    .loading {
        width: 200px;
        height: 200px;
        background: skyblue;
        margin: 100px auto 0px;
        position: relative;
    }
    .loading .item {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: pink;
        position: absolute;
        /* left：50%是指的左边的点值在中间 第一个圆点在最顶部 */
        left: 50%;
        top: 0px;
        margin-left: -10px;
        /* 基准点 */
        transform-origin: 10px 100px;
    }
    .loading .item:nth-child(2) {
        transform: rotate(40deg);
    }
    .loading .item:nth-child(3) {
        transform: rotate(80deg);
    }
    /* 以此类推 快速做出其他的圆点 */
    .loading .item:nth-child(4) {
        transform: rotate(120deg);
    }
    .loading .item:nth-child(5) {
        transform: rotate(160deg);
    }
    .loading .item:nth-child(6) {
        transform: rotate(200deg);
    }
    .loading .item:nth-child(7) {
        transform: rotate(240deg);
    }
    .loading .item:nth-child(8) {
        transform: rotate(280deg);
    }
    .loading .item:nth-child(9) {
        transform: rotate(320deg);
    }
</style>

优化代码

上面我们给每一个点都设置了旋转的角度。
这样觉得很low、都在重复。如果点很多，那不是要累死我们呀。
怎么解决这个问题了？我们可以使用css的变量来解决这个问题。
我们可以可以使用自定义属性来处理这个问题的。自定义属性是以"--"开头。

使用自定义属性”–” 来优化代码

<style>
body {
    margin: 0;
}
.loading {
    width: 200px;
    height: 200px;
    background: skyblue;
    margin: 100px auto 0px;
    position: relative;
}
.loading .item {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: pink;
    position: absolute;
    /* left：50%是指的左边的点值在中间 第一个圆点在最顶部 */
    left: 50%;
    top: 0px;
    margin-left: -10px;
    /* 基准点 */
    transform-origin: 10px 100px;
    /* calc 函数可以进行运算*/
    transform: rotate(calc(var(--i)*40deg));
}
</style>
<div class="itdwcnwqseo loading">
    <!-- 自定义属性是通过"--"来命名的 -->
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
</div>

让每个一个小圆点间隔一段时间亮起来

<style>
    body {
        margin: 0;
    }
    .loading {
        width: 200px;
        height: 200px;
        background: pink;
        margin: 100px auto 0px;
        position: relative;
    }
    .loading .item {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .2);
        position: absolute;
        /* left：50%是指的左边的点值在中间 第一个圆点在最顶部 */
        left: 50%;
        top: 0px;
        margin-left: -10px;
        /* 基准点 */
        transform-origin: 10px 100px;
        /* calc 函数可以进行运算*/
        transform: rotate(calc(var(--i)*40deg));
        /* 调用动画 */
        animation: loading 2s ease infinite;
    }
    @keyframes loading {
        0%,
        50% {
            background: rgba(255, 255, 255, .2);
        }
        50.5%,
        100% {
            background: #fff;
        }
    }
    .loading .item:nth-child(1) {
        animation-delay: 0s;
    }
    .loading .item:nth-child(2) {
        animation-delay: 0.111s;
    }
    .loading .item:nth-child(3) {
        animation-delay: 0.222s;
    }
    /* 以此类推 快速做出其他的圆点 */
    .loading .item:nth-child(4) {
        animation-delay: 0.333s;
    }
    .loading .item:nth-child(5) {
        animation-delay: 0.444s;
    }
    .loading .item:nth-child(6) {
        animation-delay: 0.555s;
    }
    .loading .item:nth-child(7) {
        animation-delay: 0.666s;
    }
    .loading .item:nth-child(8) {
        animation-delay: 0.777s;
    }
    .loading .item:nth-child(9) {
        animation-delay: 0.888s;
    }
</style>
</head>
<body>
<div class="itdwcnwqseo loading">
    <!-- 自定义属性是通过"--"来命名的 -->
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
</div>
</body>

同样优化代码

<style>
body {
    margin: 0;
}
.loading {
    width: 200px;
    height: 200px;
    background: pink;
    margin: 100px auto 0px;
    position: relative;
}
.loading .item {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    position: absolute;
    /* left：50%是指的左边的点值在中间 第一个圆点在最顶部 */
    left: 50%;
    top: 0px;
    margin-left: -10px;
    /* 基准点 */
    transform-origin: 10px 100px;
    /* calc 函数可以进行运算*/
    transform: rotate(calc(var(--i)*40deg));
    /* 调用动画 */
    animation: loading 2s ease infinite;
    animation-delay: calc(var(--i) * 0.11s);
}
@keyframes loading {
    0%,
    50% {
        background: rgba(255, 255, 255, .2);
    }
    50.5%,
    100% {
        background: #fff;
    }
}
</style>
</head>
<body>
<div class="itdwcnwqseo loading">
    <!-- 自定义属性是通过"--"来命名的 -->
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
    <div class="itdwcnwqseo item"></div>
</div>
</body>

# IT技术

文章版权归作者所有，未经允许请勿转载。

版权声明：
1、IT大王遵守相关法律法规，由于本站资源全部来源于网络程序/投稿，故资源量太大无法一一准确核实资源侵权的真实性；
2、出于传递信息之目的，故IT大王可能会误刊发损害或影响您的合法权益，请您积极与我们联系处理(所有内容不代表本站观点与立场)；
3、因时间、精力有限，我们无法一一核实每一条消息的真实性，但我们会在发布之前尽最大努力来核实这些信息；
4、无论出于何种目的要求本站删除内容，您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》：https://itdw.cn/ziliao/sfgs.pdf，
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明： http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理；请按照此通知格式填写发至本站的邮箱 wl6@163.com