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