<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>.arrow {
position: absolute;
bottom: 15%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
margin-left: -1%;
animation-name: beat;
/*动画名称*/
animation-duration: .5s;
/*设置秒数*/
animation-timing-function: linear;
/*速度曲线*/
animation-iteration-count: infinite;
/*播放次数*/
animation-direction: alternate;
/*逆向播放*/
animation-play-state: running;
/*正在运行*/
}
@keyframes {
0% {
bottom: 15%;
}
100% {
bottom: 14%;
}
}
.arrow img {
width: 30px;
}</style>
<body>
<div class="arrow">
<img src="https://sucai.suoluomei.cn/sucai_zs/images/20191107114906-sjt.png" alt="">
</div>
</body>
</html>
