html加载动画

作者：冰残°零度伤发布日期:2026-02-21 浏览:49

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 加载动画</title>
    <style>
        /* 定义加载动画的样式 */
        .loader {
            border: 16px solid #f3f3f3; /* 设置边框颜色 */
            border-top: 16px solid #3498db; /* 设置顶部边框颜色 */
            border-radius: 50%; /* 将元素变成圆形 */
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite; /* 添加动画效果 */
        }

        /* 定义动画的关键帧 */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 创建一个加载动画的 div -->
    <div class="loader"></div>

    <p>这是一个简单的加载动画示例。</p>
</body>
</html>

解释说明：

HTML 结构：我们创建了一个 div 元素，并给它添加了一个类名为 loader，用于显示加载动画。
CSS 样式：
- .loader 类定义了加载动画的外观，包括边框、宽度和高度等属性。
- 使用 border 属性创建了一个带有不同颜色边框的圆形。
- @keyframes spin 定义了一个旋转动画，从 0% 到 100%，即从 0度 旋转到 360度。
- animation 属性将这个旋转动画应用到 .loader 元素上，并设置动画持续时间为 2秒，线性播放且无限循环。

通过这段代码，你可以在网页中看到一个不断旋转的加载动画。

上一篇：html网站源码

下一篇：html select 多选