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>
  • 相关阅读:
    骑士飞行棋第二版(已完善)
    骑士飞行棋第一版(掷骰子方法分开)
    do -while语句的使用
    随机数例子(Random)
    Day6_time模块
    Day6_正则表达式
    Day6_内置函数
    centos6-7克隆主机网卡无法启动问题
    rsync+innotify做到同步式更新
    apache压力测试工具的apache bench和JMeter的安装
  • 原文地址:https://www.cnblogs.com/wangjae/p/6823921.html
Copyright © 2011-2022 走看看