纯css加载动画合集

最新推荐文章于 2024-08-15 23:27:31 发布

hellangel2019

最新推荐文章于 2024-08-15 23:27:31 发布

阅读量112

点赞数

文章标签： css3 html

本文链接：https://blog.csdn.net/hellangel2019/article/details/111871597

版权

1、点点点加载

<div class="dot">...</div>

@supports (display: none) {
   
    div.dot {
   
      display: inline-block;
      width: 3ch;
      text-indent: -1ch;
      vertical-align: bottom;
      overflow: hidden;
      animation: dot 3s infinite step-start both;
      font-family: Consolas, Monaco, monospace;
    }
  }

  @keyframes dot {
   
    33% {
   
      text-indent: 0;
    }
    66% {
   
      text-indent: -2ch;
    }
  }

2、条形加载条

<ul class="strip-loading">
    <li style="--line-index: 1;"></li>
    <li style="--line-index: 2;"></li>
    <li style="--line-index: 3;"></li>
    <li style="--line-index: 4;"></li>
    <li style="--line-index: 5;"></li>
    <li style="--line-index: 6;"></li>
</ul>

.strip-loading {
   
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    
}

.strip-loading li {
   
    --time: calc((var(--line-index) - 1) * 200ms);
    border-radius: 3px;
    width: 6px;
    height: 30px;
    background-color: #33cc99;
    animation: beat 1.5s ease-in-out var(--time