css实现图表文字闪烁

web或者小程序开发中，很多需要用到闪烁功能，最常见的应用就是消息提醒了，在以前的做法，可能会用一个gif图标来实现，的确也不是什么难事，但是如果我想对icon图表，或者文字进行修改，那么就要再一次修改gif图标，重新上传，那就比较麻烦了。

css3可以利用动画功能，很方便的实现闪烁功能，可以先看demo，点击这里。

先定义一个动画规则，当动画执行到25%的时候使其完全透明。

    @keyframes shanshuo{
      0%,50%,100%{opacity: 1}
      25%{opacity: 0;}
    }

之后定一个标签，可以是文字，也可以是icon都行。

    <span class="shanshuo">闪烁</span>

最后编写shanshuo这个类的样式

    .shanshuo{
      padding:10rpx;
      color:#FFF;
      animation:shanshuo 1s infinite;
    }

animatin后面对应的三个属性，分别是动画规则的命名，执行的实现1秒，infinite是重复执行。

如果实在微信小程序里，可以现在app.wxss文件里，先定义keyframes，这样每个page都应引用这个规则。

然后在page对应的wxss里面，实现这个规则。

好了，就是那么简单，大家可以试试看吧。