NEWS

新聞資訊

我們不只做網(wǎng)站...

CSS制作箭頭上下移動

發(fā)表日期：2022-03-07 文章編輯：洛壹網(wǎng)絡

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>