四色小球的loading动画

青青子衿~~

于 2022-07-25 16:53:47 发布

阅读量140

点赞数

分类专栏： css3 动画前端文章标签： css3 css 动画

本文链接：https://blog.csdn.net/weixin_45727272/article/details/125978647

版权

前端同时被 3 个专栏收录

54 篇文章 2 订阅

订阅专栏

css3

11 篇文章 0 订阅

订阅专栏

动画

11 篇文章 0 订阅

订阅专栏

文章目录

前言
一、html代码
二、css
总结

前言

常见的四色小球的loading动画

提示：以下是本篇文章的代码内容,供大家参考,相互学习

一、html代码

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>四色小球的loading动画</title>
    <link rel="stylesheet" href="../css/93.css">
</head>

<body>
    <div class="loader">
        <!-- --i、--c为自定义属性，CSS中可通过var函数对其调用 -->
        <span style="--i:1;--c:#2ecc71;"></span>
        <span style="--i:2;--c:#3498db;"></span>
        <span style="--i:3;--c:#f1c40f;"></span>
        <span style="--i:4;--c:#e74c3c;"></span>
    </div>
</body>

</html>

二、css

代码如下：

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #222;
}
.loader{
    /* 相对定位 */
    position: relative;
    width: 250px;
    height: 250px;
    /* 默认旋转45度 */
    transform: rotate(45deg);
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: roll 2.5s linear infinite;
}
.loader span{
    position: absolute;
    width: 100%;
    height: 100%;
    /* 通过var函数获取自定义属性--i，计算每一个span元素的旋转角度 */
    transform: rotate(calc(90deg * var(--i)));
}
.loader span::before{
    content: "";
    width: 70px;
    height: 70px;
    /* 调用自定义属性--c，设置背景色 */
    background-color: var(--c);
    border-radius: 50%;
    position: absolute;
    /* 默认都居中 */
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */
    animation: move 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}

/* 定义动画 */
@keyframes move {
    50%{
        left: 0;
        box-shadow: 0 0 5px var(--c),
        0 0 10px var(--c),
        0 0 20px var(--c);
    }
}
@keyframes roll {
    to{
        transform: rotate(360deg);
    }
}