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