zoukankan      html  css  js  c++  java
  • css动画--元素上下跳动

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

    <!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>
  • 相关阅读:
    TX2--安装跑一python3.5
    luogu P4762 [CERC2014]Virus synthesis (回文自动机)
    牛客 128A 礼物 (组合计数)
    后缀自动机学习
    Codeforces Round #309 (Div. 1)
    Vanya and Scales CodeForces
    5-45 航空公司VIP客户查询 (25分) HASH
    转载 字符串hash
    5-15 QQ帐户的申请与登陆 (25分) HASH
    5-14 电话聊天狂人 (25分) HASH
  • 原文地址:https://www.cnblogs.com/wangjae/p/6823921.html
Copyright © 2011-2022 走看看