css小圆点动画实现闪烁功能

最新推荐文章于 2024-02-26 08:56:44 发布

jesse0225

最新推荐文章于 2024-02-26 08:56:44 发布

阅读量2.1k

点赞数 3

文章标签： css 动画 css3

本文链接：https://blog.youkuaiyun.com/m0_54192171/article/details/121610498

版权

在做项目的过程中碰到这样的需求，记录一下样式的写法。

<div class='round'></div>

.round {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: #ff4d4f;
    position: relative;
  }

.round-flicker:before,
.round-flicker:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid rgba(255, 77, 79, 0.5);
    border-radius: 50%;
    animation: warn 1.2s ease-out 0s infinite; //添加动画
  }
  
@keyframes warn {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  25% {
    transform: scale(1);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  75% {
    transform: scale(2);
    opacity: 0.25;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}