CSS制作箭头上下移动
发表日期：2022-03-07 文章编辑：洛壹网络
CSS制作箭头上下移动：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上下跳动的指标箭头</title>
<script src="./js/jquery.min.js"></script>
<style>
/*黑色半圆是图片，上下箭头也是图片*/
.footer_btn{text-align:center;line-height:47px;}
@keyframes bounce-down {
25% {transform: translateY(-3px);}
50%{transform: translateY(0);}
75% {transform: translateY(3px);}
100% {transform: translateY(0);}
}
.animate-bounce-down{ -webkit-animation: bounce-down 1s linear infinite;animation: bounce-down 1s linear infinite;
}
@keyframes bounce-down1 {
25% {transform: translateY(-3px);}
50%, 100% {transform: translateY(0);}
75% {transform: translateY(3px);}
}
.animate-bounce-down1{display:none;-webkit-animation: bounce-down 1s linear infinite;animation: bounce-down 1s linear infinite;
}
</style>
</head>
<body>
<div class="footer_btn">
<!-- 黑色半圆 -->
<img src="./images/sr1.jpg" alt="" class="animate-bounce-down" />
<!-- 上下箭头 -->
<img src="./images/sr2.jpg" alt="" class="animate-bounce-down1" />
</div>
</body>
</html>
本文链接：https://www.szluoyi.com/news-details-39-650-1.html
版权声明：
1：本站所有内容均由互联网收集整理、上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，不存在任何商业目的与商业用途，如描述有误或者学术不对之处欢迎及时提出，不甚感谢。
2、 如涉及版权问题，请联系我们4724325@qq.com第一时间处理；
