跳动圆点加载动画

效果图:

完整代码:

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

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

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

       

相关推荐

  1. 登录动画

    2024-06-13 03:02:01       43 阅读

最近更新

  1. TCP协议是安全的吗?

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

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

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

    2024-06-13 03:02:01       18 阅读

热门阅读

  1. vue2学习(06)----vuex

    2024-06-13 03:02:01       5 阅读
  2. 实验:贪心算法

    2024-06-13 03:02:01       7 阅读
  3. 注解 - @ResponseBody

    2024-06-13 03:02:01       7 阅读
  4. Sqlite数据库基本使用

    2024-06-13 03:02:01       10 阅读
  5. DevOps的原理及应用详解(二)

    2024-06-13 03:02:01       7 阅读
  6. 【无标题】

    2024-06-13 03:02:01       9 阅读