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

本文主要是介绍CSS实现图标周围扩散闪烁效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

.直接上效果

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是闪烁的频率，宽高自己调整，祝你开发愉快~

这篇关于CSS实现图标周围扩散闪烁效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---