button{
animation: beat 6s ease 0s infinite normal;
}
@keyframes beat {
0% {
transform: translateY(0px);
}
2% {
transform: translateY(-7px);
}
6% {
transform: translateY(7px);
}
8% {
transform: translateY(0px);
}
10% {
transform: translateY(-5px);
}
12% {
transform: translateY(5px);
}
16% {
transform: translateY(0px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(0px);
}
}

  

css抖动动画的更多相关文章

  1. CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  2. Android中使用抖动动画吸引来用户注意

    原文:http://www.androidcn.org/topic/552e65bc61d460226ab27a5c 在应用中,有时候我们要吸引用户去点击某些按钮,比如应用市场的推荐按钮,为了能够吸引 ...

  3. 第四十二课:基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  4. Effeckt.css项目:CSS交互动画应用集锦

    目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...

  5. Android设置View抖动动画

    在应用中,有时候我们要吸引用户去点击某些按钮,比如应用市场的推荐按钮,为了能够吸引用户主动点击而且不过分的打扰用户,最好的方法就是给我们想吸引用户注意的view添加一些抖动动画,比如这张图 这里我主要 ...

  6. 基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  7. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  8. CSS波纹动画

    波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE ...

  9. css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发外层hover,要用外层position 定义绝对定位,内层的hover跳出外层的div,这样视觉上就是两个单独的div,进行内外层联动。

    css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...

随机推荐

  1. [No0000133]c# ERROR:“.”(十六进制值 0x00)是无效的字符

    December 24, 2013 c# exception “.”(十六进制值 0x00)是无效的字符. 解决方法:常见于socket方式连接(包括HTTP方式)等.报文交互时候,对方会在字符串后面 ...

  2. 在Spring的Bean注入中,即使你私有化构造函数,默认他还是会去调用你的私有构造函数去实例化

    在Spring的Bean注入中,即使你私有化构造函数,默认他还是会去调用你的私有构造函数去实例化. 如果我们想保证实例的单一性,就要在定义<bean>时加上factory-method=” ...

  3. shell之awk面试小案例

    [root@chavinking mnt]# cat textfile chavinking 1 2 3 4 5 6 nope 1 2 3 4 5 6 [root@chavinking mnt]# c ...

  4. Laravel 5.2 INSTALL- node's npm and ruby's bundler.

    https://getcomposer.org/doc/00-intro.md Introduction# Composer is a tool for dependency management i ...

  5. oracle基本命令笔记

    最近由于工作原因,再次接触oracle,因此重新来熟知下oracle基本的命令. --改密码 1.运行——键入“cmd” 回车2.键入“sqlplus/nolog” 回车3.键入“conn/as sy ...

  6. day4_高效处理文件

    read()将文件内容从磁盘中全部读出,放到内存,再给cpu处理,性能低,如果文件量大,很容易内存溢出或卡死. 高效方式: 方式一:一般不用的,代码行多 f = open('users.txt','r ...

  7. 《mongoDB》查询

    一:简单查询 db.collection.find(query, projection) - query :可选,使用查询操作符指定查询条件 - projection :可选,使用投影操作符指定返回的 ...

  8. mysql 初识sql语句

    有了mysql这个数据库软件,就可以将程序员从对数据的管理中解脱出来,专注于对程序逻辑的编写 mysql服务端软件即mysqld帮我们管理好文件夹以及文件,前提是作为使用者的我们,需要下载mysql的 ...

  9. 微信即将支持App直接打开小程序

    “今年,微信将更快速地支持各APP直接打开小程序.”微信开放平台基础部高级产品经理林兴表示.对于官方即将支持的App直接打开小程序,林兴解释说,正如大家都喜欢微信钱包里的各种便捷服务,以后一个旅游攻略 ...

  10. 新辰:共享是SEO的思维 用户是SEO的核心

    大家都知道.SEO一直没有一个能够定义的核心.新辰知道全部的东西里面在互联网领域链接是非常重要的.所以新辰觉得做SEO就是把链接做好.因此,链接对于一个站点来说简单分能够分成两种.内部的链接和外部的链 ...