NEWS

新闻资讯

w66利来国际·(中国游)官方网站不只做网站...

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>