CSS平滑过渡动画：transition

<html>

  <head>

    <link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.css" rel="stylesheet">

    <style>

      body{

        margin-top: 30px;

      }

      .box {

          width: 400px; padding: 15px;  background-color: #f0f3f9;

      }

      .content {

          height: 0; position: relative;  overflow: hidden;

          -webkit-transition: height 0.6s;

          -moz-transition: height 0.6s;

          -o-transition: height 0.6s;

          transition: height 0.6s;

      }

      .content img {

          position: absolute;  bottom: 0;

      }

      .block{

        margin: 20px 20px 20px 0;

        width:100px;

        height:100px;

        background:blue;

        transition:background 2s, width 2s;

      }

      .block:hover{

        width:300px;

        background:red;

      }

    </style>

  </head>

  <body>

    <div class="container">

      <div class="block"></div>

      <a href="javascript:" class="btn btn-primary" id="button">点击展开图片</a>

      <div id="more" class="content">

          <img src="http://i1.hoopchina.com.cn/u/1403/26/425/2709425/3076ecc2.jpg" height="191" />

      </div>

    </div>

    <script>

      (function() {

          var Btn = document.getElementById("button"),

              More = document.getElementById("more");

          var display = false;

          Btn.onclick = function() {

              display = !display;

              More.style.height = display? "192px": "0px"

              return false;

          };

      })();

    </script>

  </body>

</html>
巴特西

CSS平滑过渡动画：transition

最新文章

热门文章
