css 进度条


CSS 滚动进度条效果

CSS 闪光动画


body{overflow:hidden;background:#000}
.container{display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden;animation-delay:1s}
.item-1{width:20px;height:20px;background:#f583a1;border-radius:50%;background-color:#eed968;margin:7px;display:flex;justify-content:center;align-items:center}
@keyframes scale{0%{transform:scale(1)}
50%,75%{transform:scale(2.5)}
78%,100%{opacity:0}
}
.item-1:before{content:'';width:20px;height:20px;border-radius:50%;background-color:#eed968;opacity:0.7;animation:scale 1s infinite cubic-bezier(0,0,0.49,1.02);animation-delay:200ms;transition:0.5s all ease;transform:scale(1)}
<div class="container">
  <div class="item-1"></div> 
</div>

文章作者: 迪拜de天空
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 迪拜de天空 !
评论
  目录