html实现图片的闪烁效果,CSS实现图标闪烁效果【转】

不多说，直接上代码：.outDiv{

width:30px;

height:30px;

display: flex;

justify-content: center;

align-items: center;

}

.outDiv .blingbling{

border: 6px solid #73BF00;

width: 36px;

height: 36px;

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是闪烁的频率，宽高自己调整。