HTML5+CSS3小实例：酷炫的菱形加载动画HTML5+CSS3做一个酷炫的多彩菱形加载动画，代码超简单，一个简单的动

HTML5+CSS3做一个酷炫的多彩菱形加载动画，代码超简单，一个简单的动画，再加一个动画延迟，搞定。真想不到如此简单的代码，可以做出这么好看的loading动画，兄弟们，可别再说手残做不出来啦。

效果：

源码：

<!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>菱形加载动画</title>
    <link rel="stylesheet" href="../css/17.css">
</head>

<body>
    <div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>

body{
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg,#f4efef,#e3eeff);
}
.loading{
    width: 200px;
    height: 200px;
    display: grid;
    /* 制作3列的网格容器 */
    grid-template-columns: repeat(3,1fr);
    /* 设置行与列之间的间隙 */
    grid-gap: 10px;
    /* 对子部分进行编号 */
    /* counter-reset: number; */
    transform: rotate(45deg);
}
.loading span{
    /* 自定义属性 */
    --c:gray;
    /* 调用var函数使用自定义属性--c */
    background-color: var(--c);
    position: relative;
    transform: scale(0);
    /* 执行动画：动画 时长 线性的 无线次播放 */
    animation: blinking 2s linear infinite;
    /* 动画延迟 */
    animation-delay: var(--d);
}
.loading span::before{
    /* 设置增量 */
    /* counter-increment: number; */
    /* 将编号赋值到content，这里有助于我们根据编号设置样式 */
    /* content: counter(number); */
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transform: rotate(-45deg);
}
.loading span:nth-child(7){
    --c:#F15A5A;
    --d:0s;
}
.loading span:nth-child(4),
.loading span:nth-child(8){
    --c:#F0C419;
    --d:0.2s;
}
.loading span:nth-child(1),
.loading span:nth-child(5),
.loading span:nth-child(9){
    --c:#4EBA6F;
    --d:0.4s;
}
.loading span:nth-child(2),
.loading span:nth-child(6){
    --c:#2D95BF;
    --d:0.6s;
}
.loading span:nth-child(3){
    --c:#955BA5;
    --d:0.8s;
}

/* 定义动画 缩放 */
@keyframes blinking{
    0%,100%{
        transform: scale(0);
    }
    40%,80%{
        transform: scale(1);
    }
}