HTML&CSS ：必学！跳一跳小圆点加载loading这段代码创建了一个动态的“跳一跳”加载动画，通过 CSS 技术实

这段代码创建了一个动态的“跳一跳”加载动画，通过 CSS 技术实现了小圆点的移动和旋转效果，为页面添加了视觉吸引力和动态感。

演示效果

HTML&CSS

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: #e8e8e8;
        }

        .leap-frog {
            --uib-size: 80px;
            --uib-speed: 2s;
            --uib-color: rgb(37, 37, 149);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: var(--uib-size);
            height: var(--uib-size);
        }

        .leap-frog_dot {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
            height: 100%;
        }

        .leap-frog_dot::before {
            content: '';
            display: block;
            height: calc(var(--uib-size) * 0.22);
            width: calc(var(--uib-size) * 0.22);
            border-radius: 50%;
            background-color: var(--uib-color);
            will-change: transform;
        }

        .leap-frog_dot:nth-child(1) {
            animation: leapFrog var(--uib-speed) ease infinite;
        }

        .leap-frog_dot:nth-child(2) {
            transform: translateX(calc(var(--uib-size) * 0.4));
            animation: leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -1.5) infinite;
        }

        .leap-frog_dot:nth-child(3) {
            transform: translateX(calc(var(--uib-size) * 0.8)) rotate(0deg);
            animation: leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -3) infinite;
        }

        @keyframes leapFrog {
            0% {
                transform: translateX(0) rotate(0deg);
            }

            33.333% {
                transform: translateX(0) rotate(180deg);
            }

            66.666% {
                transform: translateX(calc(var(--uib-size) * -0.4)) rotate(180deg);
            }

            99.999% {
                transform: translateX(calc(var(--uib-size) * -0.8)) rotate(180deg);
            }

            100% {
                transform: translateX(0) rotate(0deg);
            }
        }
    </style>
</head>

<body>
    <div class="leap-frog">
        <div class="leap-frog_dot"></div>
        <div class="leap-frog_dot"></div>
        <div class="leap-frog_dot"></div>
    </div>
</body>

</html>

HTML 结构

leap-frog: 创建一个类名为 leap-frog 的 div 元素，用于包含动画的各个部分。
三个 leap-frog_dot: 代表移动的小圆点。

CSS 样式

body: 设置页面的边距、填充、高度、显示方式和对齐方式，背景色为浅灰色。
.leap-frog: 设置加载动画的容器样式，包括位置、显示方式、对齐方式、宽度、高度和间距。--uib-size: 定义动画的尺寸（80px）。--uib-speed: 定义动画的速度（2 秒）。--uib-color: 定义动画的颜色（深蓝色）。
.leap-frog_dot: 设置每个小圆点的样式，包括位置、显示方式、对齐方式、宽度、高度和初始位置。
.leap-frog_dot::before: 设置小圆点的样式，包括内容、显示方式、尺寸、圆角和背景色。
.leap-frog_dot:nth-child(n): 为每个小圆点设置不同的初始位置和动画延迟时间。第一个小圆点没有延迟。第二个小圆点延迟--uib-speed / 1.5。第三个小圆点延迟--uib-speed / 3。
@keyframes leapFrog: 定义小圆点的移动和旋转动画。0%: 小圆点在初始位置，不旋转。33.333%: 小圆点在初始位置，旋转 180 度。66.666%: 小圆点向左移动，旋转 180 度。99.999%: 小圆点向左移动更多，旋转 180 度。100%: 小圆点回到初始位置，不旋转。
每个小圆点通过 animation 属性应用 leapFrog 动画，实现移动和旋转效果。
每个小圆点的动画延迟时间不同，通过 CSS 变量--uib-speed 和计算值实现，使动画效果更加流畅。
小圆点的移动路径通过 translateX 和 rotate 属性控制，形成一个循环动画。