首页 > 代码库 > css3动画特效:上下晃动的div
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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。