css3动画之上下摆动
在前端开发中,我们有很多场景需要添加一些上下摆动的动画给我们的页面增添更加生动的交互,在这里我就不做过多的介绍了,直接上代码:
//首先要给你要添加动画的元素开启定位,并且设置动画名称
.arrow-case {
position: fixed;
bottom: -0.1rem;
margin: auto;
-webkit-animation: shaking 1s infinite;
// shaking为动画名称,1s 动画执行时间,infinite 无限循环
z-index: 50;
}
// 下面就是动画的具体执行步骤
@keyframes shaking {0% {
transform: translateY(-10px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(-10px);
}
}
【css3动画之上下摆动】这样就实现了元素上下循环摆动的效果。
推荐阅读
- PMSJ寻平面设计师之现代(Hyundai)
- 太平之莲
- 闲杂“细雨”
- 七年之痒之后
- 深入理解Go之generate
- 由浅入深理解AOP
- 期刊|期刊 | 国内核心期刊之(北大核心)
- 生活随笔|好天气下的意外之喜
- 感恩之旅第75天
- python学习之|python学习之 实现QQ自动发送消息