CSS实现3个圆点加载动画

南半球与北海道#

已于 2024-06-12 10:35:39 修改

阅读量236

点赞数 4

文章标签： css 前端 javascript

于 2024-06-07 11:15:24 首次发布

本文链接：https://blog.csdn.net/tt1234561009/article/details/139521606

版权

加载动画主要使用了css的animation和transform属性，animation用来实现动画效果，transform实现过渡，让动画看起来更真实

一、html

<div class="loadding-box">
     <div class="dot1"></div>
     <div class="dot2"></div>
     <div class="dot3"></div>
</div>

二、样式

 .loadding-box {
    display: flex;

    .dot1,
    .dot2,
    .dot3 {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       margin-left: 6px;
     }

    .dot1 {
       animation: jump 1.2s -0.4s linear infinite;
       background: #8c8ef7;
     }

    .dot2 {
       animation: jump 1.2s -0.2s linear infinite;
       background: #5e85d1;
     }

    .dot3 {
       animation: jump 1.2s linear infinite;
       background: #2e6de7;
     }

    @keyframes jump {

      0%,
      80%,
      100% {
        transform: scale(0.9);
        opacity: 1.0;
      }

      40% {
        transform: scale(1.1);
        opacity: 0.8;
      }
    }
  }