css实现图片动画效果

前端之家收集整理的这篇文章主要介绍了css实现图片动画效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

需求

项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。

实现过程

书写css

使用css的keyframe属性,配合animation。

  1. @keyframes ringing
  2. {
  3. from {transform:rotate(-30deg);}
  4. to {transform:rotate(30deg);}
  5. }
  6. .xxAnimation{
  7. animation: ringing 0.3s linear 0s 5 alternate;
  8. }

js配合

我们实现的效果应该是一进来的时候 晃两下,数据更新之后晃两下。js如下:

  1. if(data != 0){
  2. $("#messageMv").addClass("xxAnimation");
  3. setTimeout(function () {
  4. $("#messageMv").removeClass("xxAnimation");
  5. },1500)
  6. }

设置定时器的目的是让下次还能继续晃动,如果不拿掉,下次就不会晃动了。

猜你在找的CSS相关文章