比如有一个非gif的导向箭头,需要微微浮动提示用户具体操作导向,也可以用作部分特色图标的动态效果,总体让页面不那么单调,用css去写,实现方法如下:
1、首先创建一个dom元素,controller是包裹导向箭头的容器,img是导向箭头图片
<div class="controller">
<img src="xxxx" alt="">
</div>
2、css中创建动画,动画的快慢速度可以通过元素高度与animation中的秒数去调整
.controller {
position: absolute;
width: 24px;
height: 12px;
z-index: 100;
bottom: 20px;
left: 50%;
margin-left: -12px;
-webkit-animation: bounce-down 1.6s linear infinite;
animation: bounce-down 1.6s linear infinite;
img {
position: absolute;
}
}
@-webkit-keyframes bounce-down {
25% {
-webkit-transform: translateY(-4px);
}
50%, 100% {
-webkit-transform: translateY(0);
}
75% {
-webkit-transform: translateY(4px);
}
}
@keyframes bounce-down {
25% {
transform: translateY(-4px);
}
50%, 100% {
transform: translateY(0);
}
75% {
transform: translateY(4px);
}
}