来一张效果图
图中的三角形会一直上下跳动
.arrow {
position: absolute;
bottom: 15%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
margin-left: -1%;
animation-name: beat; /*动画名称*/
animation-duration: 2s; /*设置秒数*/
animation-timing-function: linear;/*速度曲线*/
animation-iteration-count: infinite;/*播放次数*/
animation-direction: alternate;/*逆向播放*/
animation-play-state: running;/*正在运行*/
}
@keyframes beat {
0% {
bottom: 15%;
}
25% {
bottom: 14%;
}
50% {
bottom: 15%;
}
75% {
bottom: 14%;
}
100% {
bottom: 15%;
}
}
.arrow img {
width: 50%;
}
<div class="arrow">
<img src="http://sucai.suoluomei.cn/sucai_zs/images/20190823153828-b986b1c4b49fe49e959f8673a02c756.png" alt="箭头">
</div>