0
点赞
收藏
分享

微信扫一扫

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

余寿 2023-12-12 阅读 105
前端css

在这里插入图片描述
对话的 ... 加载动画,直接用 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;
              }
            }
          }
举报

相关推荐

0 条评论