CSS实现图标周围扩散闪烁效果

最新推荐文章于 2025-06-20 10:00:22 发布

原创最新推荐文章于 2025-06-20 10:00:22 发布 · 9.8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #闪烁效果

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

CSS

4 篇文章

订阅专栏

本文介绍了一个简单的HTML和CSS实现闪烁图标的动画效果的方法。通过设置div元素的样式和动画属性，可以使图片在页面中呈现出逐渐放大的闪烁效果，适用于网页设计中的加载提示或吸引注意力的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.直接上效果

1.html内容

<div class="outDiv">
        <img src="../img/xinhao.png" />
        <div class="blingbling"></div>
        <div class="blingbling2"></div>
      </div>

2.样式内容

.outDiv{
  width:430px;
  height:430px;
  display: flex;
  justify-content: center;
  align-items: center;
	margin-left:200px;
	margin-top:200px;
  
}

.blingbling{
    border: 36px solid #73BF00;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    position: absolute;
    -webkit-animation: scaleout 2.5s infinite ease-in-out;
    animation: scaleout 2.5s infinite ease-in-out;
  }
.blingbling2{
    border: 36px solid #70B400;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    position: absolute;
    -webkit-animation: scaleout 2.5s infinite ease-in-out;
    animation: scaleout 2.5s infinite ease-in-out;
  }
  @-webkit-keyframes scaleout {
    0% { -webkit-transform: scale(1.0) }
    100% {
      -webkit-transform: scale(1.1);
      opacity: 0;
    }
  }
  @keyframes scaleout {
    0% {
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    } 
	  100% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        opacity: 0;
      }
  }

其中1.3s是闪烁的频率，宽高自己调整，祝你开发愉快~