利用CSS3的transition屬性實現(xiàn)滑動效果
WEB前端開發(fā) 發(fā)布時間：2015-08-05 18:44:02 作者：佚名 
我要評論
我要評論這篇文章主要介紹了利用CSS3的transition屬性實現(xiàn)滑動效果,是CSS3入門學習時的基本應用,需要的朋友可以參考下
首先援引一下w3school上的transition基本知識：
定義和用法
transition 屬性是一個簡寫屬性，用于設置四個過渡屬性：
transition-property
transition-duration
transition-timing-function
transition-delay
注釋：請始終設置 transition-duration 屬性，否則時長為 0，就不會產(chǎn)生過渡效果。
語法
CSS Code復制內(nèi)容到剪貼板
- transition: property duration timing-function delay;
實現(xiàn)滑動效果
只需要一個DIV元素便可實現(xiàn)滑動效果，避免了使用JavaScript為元素的動畫（IE瀏覽器下僅支持IE9以上）
HTML代碼
XML/HTML Code復制內(nèi)容到剪貼板
- <div style="height: 200px; width: 200px; border: 1px solid #ccc;">
- <div class="slider" id="slider">這里是內(nèi)容</div>
- </div>
- <button onclick="document.getElementById('slider').classList.toggle('closed');">點擊看看</button>
CSS代碼
CSS Code復制內(nèi)容到剪貼板
- .slider {
- overflow-y: hidden;
- max-height: 500px;
- /* 最大高度 */
- background: pink;
- height: 200px;
- width: 200px;
- /* Webkit內(nèi)核瀏覽器：Safari and Chrome*/
- -webkit-transition-property: all;
- -webkit-transition-duration: .5s;
- -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
- /* Mozilla內(nèi)核瀏覽器：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
相關文章
CSS3中動畫屬性transform、transition和animation屬性的區(qū)別
最近在項目中用到了CSS3中的動畫屬性。無奈對于css3幾個新加的屬性不太熟悉，常常容易搞混。所以從網(wǎng)站研究了點資料，總結(jié)一下，方便有需要的朋友們可以參考學習。2016-09-25- 這篇文章主要為大家詳細介紹了CSS3中Transition動畫屬性用法，教大家如何使用Transition動畫，感興趣的小伙伴們可以參考一下2016-07-04
CSS3中的Transition過度與Animation動畫屬性使用要點
這篇文章主要介紹了CSS3中的Transition過度與Animation動畫屬性使用要點Transition和Animation能被用來制作基本的頁面圖片動態(tài)效果,當然進一步的控制還是需要JavaScript的2016-05-20- 這篇文章主要為大家介紹了基于css3的屬性transition制作菜單導航效果,可實現(xiàn)鼠標滑過菜單項動態(tài)改變背景滑塊的功能,基于css3的屬性transition實現(xiàn),非常具有實用價值,需要的2015-09-01
- 這篇文章主要介紹了css3的transition屬性詳解,需要的朋友可以參考下2014-12-15
- W3C標準中對CSS3的transition這是樣描述的:“CSS的transition允許CSS的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎?/div> 2014-09-02
CSS3新屬性transition-property transform box-shadow實例學習
本文將為大家介紹下CSS3新屬性transition-property transform box-shadow的使用，感興趣的朋友可以參考下哈，希望對你學習css3有所幫助2013-06-06
使用css transition屬性實現(xiàn)一個帶動畫顯隱的微信小程序部件
這篇文章主要介紹了使用css transition屬性實現(xiàn)一個帶動畫顯隱的微信小程序部件的相關資料,需要的朋友可以參考下2018-06-13最新評論
