旋转方块加载动画

效果图:

完整代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>旋转方块加载动画</title>
    <style type="text/css">
        body {
            background: #ECF0F1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .spinner {
            width: 40px;
            height: 40px;
            background-color: #3498db;
            animation: spin 1s infinite linear;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style&

相关推荐

  1. 登录动画

    2024-06-12 16:56:04       43 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-12 16:56:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-12 16:56:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-12 16:56:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-12 16:56:04       18 阅读

热门阅读

  1. 一些常用的git指令总结

    2024-06-12 16:56:04       7 阅读
  2. 设计模式-单例模式

    2024-06-12 16:56:04       7 阅读
  3. 时间复杂度、空间复杂度,这里一次讲清楚

    2024-06-12 16:56:04       12 阅读
  4. 数智化招采平台多层级多租户能力的价值

    2024-06-12 16:56:04       9 阅读
  5. node设置镜像源详细教程

    2024-06-12 16:56:04       6 阅读
  6. 【使用ObjectSizeCalculator计算对象内存大小】

    2024-06-12 16:56:04       9 阅读
  7. Android常见内存泄漏场景总结

    2024-06-12 16:56:04       6 阅读
  8. SQL主键回显

    2024-06-12 16:56:04       5 阅读
  9. 旅游卡免费旅游的使用条件有哪些?

    2024-06-12 16:56:04       6 阅读