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>
  • 相关阅读:
    KooTeam
    nopCommerce架构分析系列(一)nopCommerce简介
    NServiceBus最流行的开源企业服务总线 for .Net资源学习篇
    How to become a software architect?
    DotNetMQ: A Complete Message Queue System for .NET
    CSLA.Net专注电子商务 – Focus on eCommerce
    .net framework从1.0说到4.0
    ERP/SCM
    泛型接口的协变和逆变
    HTML5学习
  • 原文地址:https://www.cnblogs.com/wangjae/p/6823921.html
Copyright © 2011-2022 走看看