css3动画特效:上下晃动的div
css3动画特效:上下晃动的div
<div id="square" class="container animated">上下晃动</div> /**
* transform-origin 设置旋转元素的基点位置
* animation-name 设置动画名称
* animation-duration 设置动画时间
* animation-fill-mode 设置播放后的状态
* animation-iteration-count 设置循环播放的次数
* transition-timing-function: cubic-bezier 贝塞尔曲线效果,它有四个值,指在X轴与Y轴的两个曲线的点,第一个点:X1 Y1;第二个点:X2 Y2
* transform: translate3d 设置动画Z轴位移几个元素,表示只在Z轴上移动
*
* 需要注意:transform: translate3d 不等于 transform: translateZ
*/ .animated {
animation-duration: 1s; /*动画时间*/
animation-fill-mode: both; /*播放后的状态*/
} .animated {
animation-iteration-count: infinite; /*动作循环的次数:infinite 无限循环*/
} .animated {
animation-duration: 2s; /*动画时间*/
} .container {
background: #2D97DB;
width: 90%;
height: 90%;
padding: 100px;
margin: 20px auto;
font-family: "微软雅黑";
font-size: 40px;
color: white;
text-align: center;
line-height: 90%;
} .container:hover{
animation-name:container; /*动画的名称*/
transform-origin: center bottom; /*设置动画旋转元素的基点为:居中靠下*/
cursor: pointer;
} @keyframes container{
0%,
100%,
20%,
50%,
80% {
transition-timing-function: cubic-bezier(0.215,.61,.355,1); /*贝塞尔曲线 : X1 Y1 X2 Y2*/
transform: translate3d(0,0,0); /*设置只在Z轴上移动*/
}
40%,
43%{
transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
transform: translate3d(0,-30px,0);
}
70%{
transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
transform: translate3d(0,-15px,0);
}
90%{
transform: translate3d(0,-4px,0);
}
}
css3动画特效:上下晃动的div的更多相关文章
- Magic CSS3 一款独特的CSS3动画特效包
插件描述: Magic CSS3 Animations 动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中.只需简单的在页面上引入 CSS 文件: magic.css 或者压缩版本 ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
- 分享7款顶级的CSS3动画特效
1.CSS3 SVG文字背景动画 超酷的文字特效 今天我们来分享一款基于CSS3和SVG的文字特效,文字的背景可以定义一些动画特效,在背景动画播放的同时,我们还可以选中文字.本示例让文字背景展示水波和 ...
- CSS3动画特效——transform详解
transform让css3可以做很优质的特效,transform的意思是:改变,使-变形,转换. 在css3中transform的作用也是改变,让元素倾斜,旋转,缩放,位移. 下面来一一分解tran ...
- css3动画特效:纯css3制作win8加载动画特效
Windows 8 完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下: css特效代码: <style type="text/css"> ...
- css3动画特效集合
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- CSS3 动画-- 鼠标移上去,div 会旋转、放大、移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3动画特效代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
随机推荐
- Andrion错误解决:cannot be resolved or is not a field
cannot be resolved or is not a field 解决这个问题: 选择project菜单中的clean,选择你的项目,先clean一下, 再去看看Activity中有没 ...
- Swift_UI_UIButton
class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // 1. 自定义 ...
- 学习Linux系列--布署常用服务
本系列文章记录了个人学习过程的点点滴滴. 回到目录 10.mediawiki 知名开源维基框架,我用来构建自己的知识库. 在mediawiki中新建一个http.conf文件 sudo vim /op ...
- ajax动态添加的li不能绑定click事件
单纯的给li标签添加click事件,是不会执行的. 经过试验 <ul id="searchedUser"><li>搜索结果</li></u ...
- 2016 ACM赛后总结
已经到6.30号了哎~ 比赛是6.5号的,被推迟了好久的总结现在发吧,因为我怕我再不写就真的会忘掉-- 6.3号晚,星期五,我们一行人乘坐 济南<->徐州 的火车,然后出发了-- 6.4号 ...
- flag+文件操作
flag标志位,标识位,在其他语言中可能叫开关,个人觉得当作开关更容易理解.下面我们来利用这个开关来控制文件操作的流程,从而优雅的修改配置文件. global log 127.0.0.1 local2 ...
- 市面上主流服务器简单介绍(apache、IIS、tomcat..)
apache:apache(阿帕奇)的具体介绍可以参看apache的网站(http://www.apache.org/),或者在网上随便搜搜吧.apache是世界使用排名第一的web服务器软件:它可以 ...
- .net面试题集锦
1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private : 私有成员, 在类的内部才可以访问. protected : 保护成 ...
- jqury 右击事件插件
在有些时候,网页中需要给一些标签对象加入右击的事件,在网上看了一些小的插件,但是不能根据this获取到当前的标签.所以相对他们进行改进一下.自己写了一个小的js右击事件.废话不多说了,看代码. $(f ...
- R语言拆分字符串
R语言拆分字符串 aaa<-"aa;bb;cc"ccc<-strsplit(aaa,split=";") bbb<- unlist(strsp ...