DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 利用CSS3的transition屬性實現滑動效果
利用CSS3的transition屬性實現滑動效果
編輯:布局實例     

   首先援引一下w3school上的transition基本知識:

  定義和用法

  transition 屬性是一個簡寫屬性,用於設置四個過渡屬性:

  transition-property

  transition-duration

  transition-timing-function

  transition-delay

  注釋:請始終設置 transition-duration 屬性,否則時長為 0,就不會產生過渡效果。

201585184048725.jpg (718×154)

  語法

  CSS Code復制內容到剪貼板

  transition: property duration timing-function delay;

  實現滑動效果

  只需要一個DIV元素便可實現滑動效果,避免了使用JavaScript為元素的動畫(IE浏覽器下僅支持IE9以上)

HTML代碼

XML/HTML Code復制內容到剪貼板
  1. <div style="height: 200px; width: 200px; border: 1px solid #ccc;">
  2. <div class="slider" id="slider">這裡是內容</div>
  3. </div>
  4. <button onclick="document.getElementById('slider').classList.toggle('closed');">點擊看看</button>

  CSS代碼

  CSS Code復制內容到剪貼板

  .slider {

  overflow-y: hidden;

  max-height: 500px;

  /* 最大高度 */

  background: pink;

  height: 200px;

  width: 200px;

  /* Webkit內核浏覽器:Safari and Chrome*/

  -webkit-transition-property: all;

  -webkit-transition-duration: .5s;

  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

  /* Mozilla內核浏覽器:firefox3.5+*/

  -moz-transition-property: all;

  -moz-transition-duration: .5s;

  -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

  /* Opera*/

  -o-transition-property: all;

  -o-transition-duration: .5s;

  -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

  /* IE9*/

  -ms-transition-property: all;

  -ms-transition-duration: .5s;

  -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

  }

  .slider.closed {

  max-height: 0;

  }

  demo演示地址:http://www.zjgsq.com/example?pid=1166

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved