CSS3中transition的使用方法-創(chuàng)新互聯(lián)

這篇文章主要講解了“CSS3中transition的使用方法”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS3中transition的使用方法”吧！

專業(yè)從事網(wǎng)站制作、成都網(wǎng)站制作,高端網(wǎng)站制作設(shè)計,微信小程序,網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊竭力真誠服務(wù)，采用HTML5建站+CSS3前端渲染技術(shù)，自適應(yīng)網(wǎng)站建設(shè)，讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過程建立專項小組，與您實時在線互動，隨時提供解決方案，暢聊想法和感受。

transition

css3的transition允許css的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效果改變CSS的屬性值

transition-property：檢索或設(shè)置對象中的參與過渡的屬性
transition-duration：檢索或設(shè)置對象過渡的持續(xù)時間
transition-delay：檢索或設(shè)置對象延遲過渡的時間
transition-timing-function：檢索或設(shè)置對象中過渡的動畫類型

簡寫： 
transition:all/具體屬性值 運動時間s/ms 延遲時間s/ms 動畫類型

transition-timing-function：檢索或設(shè)置對象中過渡的動畫類型

貝塞爾曲線：
屬性值：cubic-bezier()貝塞爾曲線網(wǎng)址：http://cubic-bezier.com/逐幀動畫：transition-timing-function:steps(動畫執(zhí)行的步數(shù));

CSS3 2D

transform

transform的屬性包括：rotate() / skew() / scale() / translate(,) ，分別還有x、y之分，比如：rotatex() 和 rotatey() 

1、translate()

將元素向指定的方向移動，類似于position中的relative。 
水平移動：向右移動translate(tx,0)和向左移動translate(-tx,0)；
垂直移動：向上移動translate(0,-ty)和向下移動translate(0,ty);
對角移動：右下角移動translate(tx,ty)、右上角移動translate(tx,-ty)、左上角移動translate(-tx,-ty)和左下角移動translate(-tx,ty)。

translateX()：水平方向移動一個對象。對像只向X軸進(jìn)行移動，如果值為正值，對像向右移動；如果值為負(fù)值，對像向左移動。translateY()：縱軸方向移動一個對象。對象只向Y軸進(jìn)行移動，如果值為正值，對象向下移動；如果值為負(fù)值，對像向上移動。 
這兩個函數(shù)和前面介紹的translate()函數(shù)不同的是每個方法只接受一個值。 
所以
transform:translate(-100px,0)實際上等于transform:translateX(-100px);
transform:translate(0,-100px)實際上等于transform:translateY(-100px)。

2、scale()

讓元素根據(jù)中心原點對對象進(jìn)行縮放。默認(rèn)的值1。因此0.01到0.99之間的任何值，使一個元素縮?。欢魏未笥诨虻扔?.01的值，讓元素顯得更大。
縮放scale()函數(shù)和translate()函數(shù)的語法非常相似，他可以接受一個值，也可以同時接受兩個值，如果只有一個值時，其第二個值默認(rèn)與第一個值相等。
例如，
scale(1,1)元素不會有任何變化，而scale(2,2)讓元素沿X軸和Y軸放大兩倍。 
scaleX()：相當(dāng)于scale(sx,1)。表示元素只在X軸（水平方向）縮放元素，其默認(rèn)值是1。 
scaleY()：相當(dāng)于scale(1,sy)。表示元素只在Y軸（縱橫方向）縮放元素，其默認(rèn)值是１。

3、rotate()

旋轉(zhuǎn)rotate()函數(shù)通過指定的角度參數(shù)對元素根據(jù)對象原點指定一個2D旋轉(zhuǎn)。它主要在二維空間內(nèi)進(jìn)行操作，接受一個角度值，用來指定旋轉(zhuǎn)的幅度。如果這個值為正值，元素相對原點中心順時針旋轉(zhuǎn)；如果這個值為負(fù)值，元素相對原點中心逆時針旋轉(zhuǎn)。 

 rotateX() 方法，元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)

rotateY() 方法，元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)

4、skew()

傾斜skew()函數(shù)能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。 
一個參數(shù)時：表示水平方向的傾斜角度；
兩個參數(shù)時：第一個參數(shù)表示水平方向的傾斜角度，第二個參數(shù)表示垂直方向的傾斜角度 

transform-origin

transform-origin是變形原點，也就是該元素圍繞著那個點變形或旋轉(zhuǎn)，該屬性只有在設(shè)置了transform屬性的時候起作用；

因為我們元素默認(rèn)基點就是其中心位置，換句話說我們沒有使用transform-origin改變元素基點位置的情況下，transform進(jìn)行的rotate,translate,scale,skew等操作都是以元素自己中心位置進(jìn)行變化的。 

感謝各位的閱讀，以上就是“CSS3中transition的使用方法”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS3中transition的使用方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

新聞名稱：CSS3中transition的使用方法-創(chuàng)新互聯(lián)
路徑分享：http://bm7419.com/article28/ijijp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、商城網(wǎng)站、域名注冊、網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)