css抖动动画
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抖动动画的更多相关文章
- CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果
CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...
- Android中使用抖动动画吸引来用户注意
原文:http://www.androidcn.org/topic/552e65bc61d460226ab27a5c 在应用中,有时候我们要吸引用户去点击某些按钮,比如应用市场的推荐按钮,为了能够吸引 ...
- 第四十二课:基于CSS的动画引擎
由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...
- Effeckt.css项目:CSS交互动画应用集锦
目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...
- Android设置View抖动动画
在应用中,有时候我们要吸引用户去点击某些按钮,比如应用市场的推荐按钮,为了能够吸引用户主动点击而且不过分的打扰用户,最好的方法就是给我们想吸引用户注意的view添加一些抖动动画,比如这张图 这里我主要 ...
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- CSS波纹动画
波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE ...
- 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触发 ...
随机推荐
- javascript中的数字玩法,颠覆你的眼睛
1.JavaScript中的数字中有一些很奇葩的现象. 在Chrome控制台中可以自己做一下实验: 1 === 1.0 ; //true 习惯了强类型语言,如java,c,OC看到这个结论还是有点小迷 ...
- 源码编译安装nginx
安装依赖软件 1.安装编译工具gcc gcc是一个开源编译器集合,用于处理各种各样的语言:C.C++.Java.Ada等,在linux世界中是最通用的编译器,支持大量处理器:x86.AMD64.Pow ...
- linux添加新硬盘
1.添加新磁盘 2.fdisk -l查看磁盘被识别的名称 3.如果输入fdisk -l命令没有找到新的磁盘,按下面步骤操作 1)进入到cd /sys/class/scsi_host/ 2)echo & ...
- 一个DRAM的存储单元存储的是0还是1取决于电容是否有电荷,有电荷代表1,无电荷代表0。
小结: 1.一个DRAM的存储单元存储的是0还是1取决于电容是否有电荷,有电荷代表1,无电荷代表0. https://baike.baidu.com/item/随机存取存储器/4099402?fr=a ...
- use of objects can be less efficient than a procedural approach
PHP Advanced and Object-Oriented Programming 3rd Edition As for the technical negatives of OOP, use ...
- lsof and dynamic array in bash/shell
https://unix.stackexchange.com/questions/171519/lsof-warning-cant-stat-fuse-gvfsd-fuse-file-system F ...
- [bigdata] palantir
Palantir的无缝数据融合技术关键在于本体数据模型的灵活性,动态性,而且要能反映人.事.物和环境的关联关系及因果联系,这是大数据技术面临的核心挑战.
- [development][C] C语言标准
GUN C的标准文档: 也就是glibc https://www.gnu.org/software/libc/ http://man7.org/linux/man-pages/dir_section_ ...
- airflow 实战
def print_hello(*a,**b): print a print "=========" print b print 'Hello world!' raise Valu ...
- python学习目录(转载)
python基础篇 python 基础知识 python 初始python python 字符编码 python 类型及变量 python 字符串详解 python 列表详解 ...