Css实现上下无限跳动动画
Css实现上下无限跳动动画
明知山
发布于 2022-05-05 20:05:29
发布于 2022-05-05 20:05:29
代码可运行
运行总次数：0
代码可运行
<!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 beat {
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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-08-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
