CSS实现图标闪烁效果【转】 2019-05-30 Web 暂无评论 2677 次阅读 不多说,直接上代码:.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; } }CSSCopy只要把这个样式加到你的图标或上,就有效果啦~例如:<div class="outDiv"> <img src="../img/xinhao.png" /> <div class="blingbling"></div> </div>HTMLCopy其中1.3s是闪烁的频率,宽高自己调整。转自:: CSS实现图标闪烁效果 - 宁晓 - CSDN 打赏: 微信, 支付宝 标签: none 本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。