CSS实现水波纹扩散动画

// html
<div class="animation"></div>

// JavaScript
.animation {
  position: relative;
  width: 10px;
  height: 10px;
  background: #409eff;
  border-radius: 50%;
  &:after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    width: 100%;
    height: 100%;
    border: 5px solid #ff1883;
    border-radius: 50%;
    animation: antStatusProcessing 1.2s ease-in-outinfinite;
  }
}
@-webkit-keyframes antStatusProcessing {
  0% {
    -webkit-transform: scale(.8);
    transform: scale(.8);
    opacity: .5
  }
  to {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    opacity: 0
  }
}

@keyframes antStatusProcessing {
  0% {
    -webkit-transform: scale(.8);
    transform: scale(.8);
    opacity: .5
  }
  to {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    opacity: 0
  }
}

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据