CSS/jQuery:使图标闪烁

Question

我记得做了一些css学习,我学会了做文字装饰:眨眼,文字开始闪烁.

现在我有一个图标,

.iconPM{
background: url(../images/icons/mail_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
display:inline-block;
}

想知道我是否可以通过简单的css或jquery(如果需要)进行此眨眼.或者也许在jquery推荐的任何其他好的效果

Answer 1

像这样的简单jquery会这样做:

function blink(){
    $('.iconPM').delay(100).fadeTo(100,0.5).delay(100).fadeTo(100,1, blink);
}

$(document).ready(function() {
    blink();
});

Answer 2

CSS动画现在得到了很好的支持，所以我想我会分享一个仅CSS的答案。

.iconPM {
  background: url(https://raw.githubusercontent.com/stephenhutchings/typicons.font/493867748439a8e1ac3b92e275221f359577bd91/src/png-24px/mail.png) center no-repeat;
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  border: none;
  display:inline-block;
  
  animation: blink 2s ease-in infinite;
}

@keyframes blink {
  from, to { opacity: 1 }
  50% { opacity: 0 }
}

<span class="iconPM"></span>