闪烁圆点加载动画

效果图:

完整代码:

<!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;
        }

        .blinking-dots {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 60px;
        }

        .blinking-dots div {
            width: 12px;
            height: 12px;
            background-color: #3498db;
            border-radius: 50%;
            animation: blink 1s infinite;
        }

  

相关推荐

  1. 登录动画

    2024-06-12 19:12:03       42 阅读

最近更新

  1. TCP协议是安全的吗?

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

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

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

    2024-06-12 19:12:03       18 阅读

热门阅读

  1. jQuery如何验证复选框是否选中

    2024-06-12 19:12:03       5 阅读
  2. js基本数据类型

    2024-06-12 19:12:03       5 阅读
  3. streamlit和grado的使用

    2024-06-12 19:12:03       5 阅读
  4. 中证指数绿色金融

    2024-06-12 19:12:03       6 阅读
  5. 【Linux学习之路 | vim编译器】vim编译器的使用

    2024-06-12 19:12:03       6 阅读
  6. 互动技巧( Interaction Skills 业务分析能力)

    2024-06-12 19:12:03       5 阅读
  7. Excel分组做散点图

    2024-06-12 19:12:03       7 阅读
  8. 最大N个数与最小N个数之和

    2024-06-12 19:12:03       5 阅读
  9. 【MeshLib & VTK】MeshLib PK VTK

    2024-06-12 19:12:03       7 阅读
  10. userservice

    2024-06-12 19:12:03       5 阅读