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>
  • 相关阅读:
    on和where的区别
    分组查询 group by having 排序 order by asc(升序)或desc(降序)
    连接查询 left join on, union
    md5加密方法
    where查询条件的指定,between and,in,like
    Mapnix(转) Anny
    Rolebased access control(RBAC) Anny
    TestComplete如何识别对象(转) Anny
    Jira workflow Anny
    crx文件 Anny
  • 原文地址:https://www.cnblogs.com/wangjae/p/6823921.html
Copyright © 2011-2022 走看看