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>
    </div>

3.完成css样式

这是一个使用CSS动画创建的加载动画效果。该加载动画位于屏幕的中央，具有旋转的圆圈和两个旋转的圆圈边界。加载动画的背景是一个渐变色，从上到下渐变。

CSS代码中的关键部分是使用@keyframes规则定义了两个动画，分别命名为a1和a2。这两个动画都具有2秒钟的时长，并且以线性的方式无限次播放。a1动画使圆圈顺时针旋转360度，而a2动画使文字逆时针旋转360度。

通过这个加载动画效果，你可以在页面加载或进行其他耗时操作时使用，以提供一个视觉上的反馈给用户，告知他们操作正在进行中，以免让用户感到无响应。

    <style>
        * {
            /* 初始化 取消页面内外边距 */
            margin: 0;
            padding: 0;
        }

        body {
            /* 100%窗口高度 */
            height: 100vh;
            /* 渐变背景 */
            background: linear-gradient(to bottom, #2b5876, #09203f);
            /* 弹性布局 水平、垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loading {
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            border-radius: 50%;
            border-top: 10px solid #63a69f;
            /* 相对定位 */
            position: relative;
            /* 执行动画（动画a1 时长 线性的 无限次播放） */
            animation: a1 2s linear infinite;
        }

        .loading::before,
        .loading::after {
            content: "";
        }

        .loading::before {
            border-top: 10px solid #f2e1ac;
            /* 旋转120度 */
            transform: rotate(120deg);
        }

        .loading::after {
            border-top: 10px solid #f2836b;
            /* 旋转240度 */
            transform: rotate(240deg);
        }

    </style>

五、项目总结

在这个项目中，我使用了HTML和CSS来创建加载动画效果。首先，我定义了一个包含加载动画的div容器，设置了容器的宽度、高度和边框样式。然后，我使用伪元素::before和::after来创建两个旋转的扇形，分别设置了它们的颜色和旋转角度。最后，我在容器内部添加了一个文字元素，用于显示加载中的文本。

在CSS部分，我使用了关键帧动画@keyframes来定义旋转的动画效果。我创建了两个动画，分别是a1和a2，它们分别控制了两个扇形元素的旋转。通过设置transform属性来实现旋转效果，并使用infinite关键字让动画无限循环播放。

此外，我还设置了背景渐变和页面居中样式，以提高页面的美观性和用户体验。

通过这个项目，我学习到了如何使用CSS创建简单的动画效果，并了解了关键帧动画的基本用法。这个加载动画可以在实际的网页项目中用于提供操作进行中的视觉反馈，提高用户体验。

六、源码获取

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