.
.outDiv{ width:30px; height:30px; display: flex; justify-content: center; align-items: center; .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; } } }
只要把這個樣式加到你的圖標<img>或<div>上,就有效果啦~
例如:
<div class="outDiv"> <img src="../img/xinhao.png" /> <div class="blingbling"></div> </div>
其中1.3s是閃爍的頻率,寬高自己調整,祝你開發愉快~