HTML5+CSS3小实例：菱形加载动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《编程乐学》- 菱形加载动画</title>
</head>

<body>
   
</body>

</html>

2.完成页面内容

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

3.完成css样式

在这个项目中，我们创建了一个漂亮的菱形加载动画。通过使用CSS的样式和布局属性，我们成功地实现了动画效果。

首先，我们设置了整个页面的样式，包括背景颜色和居中对齐。然后，我们创建了一个名为"loading"的容器，用于包含加载动画的方块。我们使用CSS的网格布局来将方块排列成3列，并设置了行与列之间的间隙。

接下来，我们使用:nth-child()选择器来为不同位置的方块设置不同的颜色和延迟时间。通过为每个方块设置自定义属性(--c和--d)，我们可以在CSS中使用这些属性来控制方块的样式和动画延迟时间。

最后，我们使用关键帧动画(@keyframes)来定义方块的动画效果。通过设置不同的缩放比例，我们实现了方块的闪烁效果。

通过完成这个项目，我们学到了以下几点：

使用CSS的样式属性来设置页面的外观和布局。
使用网格布局来创建灵活的网格结构。
使用:nth-child()选择器来选择特定位置的元素。
使用自定义属性来在CSS中定义和使用自定义变量。
使用关键帧动画来创建复杂的动画效果。

    <style>
        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; */
            /* 旋转45度 */
            transform: rotate(45deg);
        }


        .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;
            /* 到这里基本完成了，我们来吧编号去掉吧 */
        }
    </style>

五、项目总结

在这个项目中，我们成功地创建了一个漂亮的菱形加载动画。通过使用CSS的网格布局和动画属性，我们实现了方块的旋转和闪烁效果。通过调整方块的颜色和延迟时间，我们使得动画更加生动和吸引人。这个项目展示了CSS在创建动画效果方面的强大能力。

通过完成这个项目，我们学到了以下几点：

使用CSS的网格布局来创建灵活的布局结构。
使用CSS的动画属性和关键帧动画来实现动画效果。
使用自定义属性和var()函数来控制动画的样式和延迟时间。
使用伪元素(::before)来添加额外的样式和效果。

六、源码获取

✨还可以关注宫纵号《编程乐学》，菜单栏有很多优质的开源项目以及更多的编程资料等你来学习。