需求

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

实现过程

书写css

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

@keyframes ringing
{
from {transform:rotate(-30deg);}
to {transform:rotate(30deg);}
}
.xxAnimation{
animation: ringing 0.3s linear 0s 5 alternate;
}

js配合

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

if(data != 0){
$("#messageMv").addClass("xxAnimation");
setTimeout(function () {
$("#messageMv").removeClass("xxAnimation");
},1500)
}

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

css实现图片动画效果的更多相关文章

  1. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  2. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

  3. CSS 实现图片灰度效果

    非原创-从网上收索出来的文章 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img ...

  4. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

  5. 多种方法实现H5网页图片动画效果;

    在web开发中,GIF动画效果是随处可见,比如常见的loading加载.人物奔跑的gif图片等等,那么这些都是怎么实现的呢?其实实现的原理很简单,简而言之,这些所谓的动画都是一帧一帧的图片经过一段时间 ...

  6. vue2借助animate.css实现路由动画效果

    第一步: npm install animate.css --save 第二步:打开main.js import animate from 'animate.css' Vue.use(animate) ...

  7. css实现边框动画效果

    最近写了几个页面都用到css动画,以及很多before,after伪类.在此记录一下成果.css边框循环动画,页面效果如下: 1.沿着边框动画的图形使用before,after伪类写的.当时想用切图来 ...

  8. css实现图片闪光效果

    1.这个效果是看到京东商城上的一个下效果,原本的思路是 用js控制一个图片在某张需要闪光的图片上重复出现,但是 网上找了一些资料,竟然是用css写的,真是太帅了!!! 2.原理:在需要闪光的图片前添加 ...

  9. iOS 加载本地 HTML 文件 CSS 样式图片无效果

    在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图 ...

随机推荐

  1. mac安装numpy,scipy,matplotlib

      SaintKings-Mac-mini:~ saintking$ python Python ( , ::) [GCC Compatible Apple LLVM (clang-)] on dar ...

  2. 华为云MySQL金融版正式商用,高可靠的金融级数据库来了

    摘要:全新三节点架构,基于深度优化的MGR组复制技术,提供金融级的数据一致性. 日前,华为云数据库MySQL 金融版正式商业化发布,MySQL金融版采用MGR技术,基于Paxos协议,采用一主两备三节 ...

  3. Spring MVC上传文件原理和resolveLazily说明

    问题:使用Spring MVC上传大文件,发现从页面提交,到进入后台controller,时间很长.怀疑是文件上传完成后,才进入.由于在HTTP首部自定义了“Token”字段用于权限校验,Token的 ...

  4. UILabel(label控件)的详细使用及特殊效果

    转自:http://blog.sina.com.cn/s/blog_af73e7a70101ahlm.html UILabel *label = [[UILabelalloc] initWithFra ...

  5. git 使用详解(9)-- 分支的新建与合并 git branch -d、merge、 --merged/--no-merged/-v

    现在让我们来看一个简单的分支与合并的例子,实际工作中大体也会用到这样的工作流程: 开发某个网站. 为实现某个新的需求,创建一个分支. 在这个分支上开展工作. 假设此时,你突然接到一个电话说有个很严重的 ...

  6. [TimLinux] Python如何运行程序

    1. Python解释器安装 访问官方网站:https://www.python.org/, 在首页标签中找到“Downloads”,根据不同的操作系统,选择相应的下载源文件即可. 2. 源码安装 在 ...

  7. String and Arrays

    Description 有一个N*N的字符矩阵,从上到下依次记为第1行,第2行,--,第N行,从左至右依次记为第1列,第2列,--,第N列.    对于这个矩阵会进行一系列操作,但这些操作只有两类:  ...

  8. python学习笔记—DataFrame和Series的排序

    更多大数据分析.建模等内容请关注公众号<bigdatamodeling> ################################### 排序 ################## ...

  9. ARTS-S python抽象方法抽象类

    # coding: utf-8 from abc import ABC, abstractmethod class AbstractClassExample(ABC): def __init__(se ...

  10. 冒泡排序 C&&C++

    冒泡排序(因为过程像冒泡,所以叫做冒泡排序)   流程: (1)对数组中各个数字,一次比较相邻两个 (2)如果前面大于后面,就交换这两个数据 (3)再用同样的方法继续排,直到外层循环排完 或者 (1) ...