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>
本文鏈接：http://www.candtguttering.com/news-details-39-650-1.html
版權聲明：
1：本站所有內容均由互聯網收集整理、上傳，并且以計算機技術研究交流為目的，僅供大家參考、學習，不存在任何商業目的與商業用途，如描述有誤或者學術不對之處歡迎及時提出，不甚感謝。
2、 如涉及版權問題，請聯系我們4724325@qq.com第一時間處理；
