【CSS】前端点点点加载小点样式css动画过程实现

努力挣钱的小鑫

已于 2023-12-15 09:45:58 修改

阅读量897

点赞数 2

分类专栏： HTML/CSS 文章标签：前端 css

于 2023-12-11 14:55:39 首次发布

本文链接：https://blog.youkuaiyun.com/IAIPython/article/details/134927210

版权

HTML/CSS 专栏收录该内容

30 篇文章

订阅专栏

在这里插入图片描述
对话的 ... 加载动画，直接用 CSS 就可以实现，样式可以自己改，逻辑大差不差

 <div class="loading-text">
	 <span class="dot1"></span>
	 <span class="dot2"></span>
	 <span class="dot3"></span>
 </div>

          .loading-text {
            > span {
              display: inline-block;
              width: 10px;
              height: 10px;
              background-color: $color;
              border-radius: 50%;
              & + span {
                margin-left: 5px;
              }
            }
            .dot1 {
              animation: dot 1s infinite;
            }
            .dot2 {
              animation: dot 1s infinite 0.2s;
            }
            .dot3 {
              animation: dot 1s infinite 0.4s;
            }
            .dot4 {
              animation: dot 1s infinite 0.6s;
            }
            @keyframes dot {
              0% {
                opacity: 0;
              }
              50% {
                opacity: 1;
              }
              100% {
                opacity: 0;
              }
            }
          }