zoukankan      html  css  js  c++  java
  • css控制div上下移动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</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;  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;  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>

    来源:https://www.cnblogs.com/wangyongx/p/5022529.html

  • 相关阅读:
    生病了,难受啊
    2005年1月31号随笔一篇
    [转]永远的Beyond
    关于IE问题,请教和求救
    中国财富排行榜
    这两天简直倒霉透顶了
    Asp.net(C#)给图片加上水印效果
    我不爱的那个女人
    555,我的hotmail从2G变回2M的了
    怀念永远的战神
  • 原文地址:https://www.cnblogs.com/-lin/p/11607602.html
Copyright © 2011-2022 走看看