上下跳动的箭头 css

Dear 丶 2022-03-28 09:00 276阅读 0赞

在H5场景动画时，常常会用到着一样一个效果，箭头持续上下跳动来引导用户上下滑动整个页面

![复制代码][copycode.gif]

<!DOCTYPE html >
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>css动画--元素上下跳动</title>
            <style type="text/css">
            @-webkit-keyframes bounce-down {
             25% {-webkit-transform: translateY(-10px);}
             50%, 100% {-webkit-transform: translateY(0);}
             75% {-webkit-transform: translateY(10px);}
            }
    
            @keyframes bounce-down {
             25% {transform: translateY(-10px);}
             50%, 100% {transform: translateY(0);}
             75% {transform: translateY(10px);}
            }
    
            .animate-bounce-down{ background:#333; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-down 1.5s linear infinite;animation: bounce-down 1.5s linear infinite;
            }
    
            @-webkit-keyframes bounce-up {
             25% {-webkit-transform: translateY(10px);}
             50%, 100% {-webkit-transform: translateY(0);}
             75% {-webkit-transform: translateY(-10px);}
            }
    
            @keyframes bounce-up {
             25% {transform: translateY(10px);}
             50%, 100% {transform: translateY(0);}
             75% {transform: translateY(-10px);}
            }
    
            .animate-bounce-up{ background:#ddd; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-up 1.4s linear infinite;animation: bounce-up 1.4s linear infinite;}
            </style>
        </head>
        <body>
            <div class="animate-bounce-up"></div>
            <div class="animate-bounce-down"></div>
        </body>
    </html>

[copycode.gif]: /images/20220328/f03ec9108f434f9ab0b70d7700baa0c5.png