這篇文章主要介紹“css3過(guò)渡與轉(zhuǎn)換的方法”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css3過(guò)渡與轉(zhuǎn)換的方法”文章能幫助大家解決問(wèn)題。

成都創(chuàng)新互聯(lián)長(zhǎng)期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為敘永企業(yè)提供專業(yè)的成都網(wǎng)站制作、網(wǎng)站建設(shè)，敘永網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

一 css3過(guò)渡 轉(zhuǎn)換

css3過(guò)渡(transition)允許我們?cè)谙薅ǖ臅r(shí)間內(nèi)從一個(gè)屬性值轉(zhuǎn)變到另一個(gè)屬性值.

●transition-property:指定要轉(zhuǎn)換的屬性

●transition-duration:指定轉(zhuǎn)換發(fā)生的持續(xù)時(shí)間

●transition-timing-function:指定轉(zhuǎn)換的速度在其持續(xù)時(shí)間內(nèi)如何變化

●transition-delay:指定過(guò)渡效果的延遲(以秒為單位)

在下面的例子中,我們將transition屬性設(shè)置為持續(xù)時(shí)間為5s的轉(zhuǎn)換效果.并設(shè)置ease-in定時(shí)函數(shù),該函數(shù)有淡入的效果.

css代碼:

transition:transform 5s ease-in;

過(guò)渡效果可以應(yīng)用于各種css屬性,包括:背景顏色,寬度,高度,不透明度等等.

在下面的例子中,div元素的寬度和高度都是100px,并有一個(gè)紅色的背景.我么為width屬性指定一個(gè)過(guò)渡效果,持續(xù)時(shí)間為3s.

css代碼:

div.transition{ width:100px; height:100px;background:red;color:white;transition:width 3s; }

div.transition:hover{ width:250px;}

效果如下:

如果你將光標(biāo)懸停在div元素上,則會(huì)從左向右移動(dòng).

當(dāng)光標(biāo)被移出div元素時(shí),它將逐漸變回原來(lái)的樣式.

transition-timing-function屬性指定過(guò)渡效果的速度曲線.

它可以有以下值:

ease:動(dòng)畫開(kāi)始緩慢,然后加速(默認(rèn)值)

ease-in:緩慢開(kāi)始,然后加速,突然停止.

ease-out:快速啟動(dòng),但減速停止.

ease-in-out:類似于緩解,但更加微妙的加速和減速.

linear:勻速轉(zhuǎn)換

cubic-bezier()函數(shù),它允許你在cubic-bezier(立方體-貝塞爾)函數(shù)中定義你自己的值.取值范圍為0~1之間.

css代碼:

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

二 css3 transform:rotate()

css3中transform(轉(zhuǎn)換)允許你翻轉(zhuǎn),旋轉(zhuǎn),縮放和傾斜元素.

transform(轉(zhuǎn)換)是一種讓元素更改形狀,大小和位置的效果

css3支持2d和3d轉(zhuǎn)換.

設(shè)置15deg的角度旋轉(zhuǎn)(順時(shí)針?lè)较蛐D(zhuǎn)),css代碼如下:

transform:totate(15deg);

正值,順時(shí)針旋轉(zhuǎn);負(fù)值,逆時(shí)針旋轉(zhuǎn).

三 css3 transform-origin,translate(),skew()

transition-origin(原點(diǎn))屬性允許你更改要轉(zhuǎn)換元素的位置.該屬性的默認(rèn)值是50% 50%,對(duì)應(yīng)于元素的中間.

在下面的例子中,我們將transform-origin屬性和transform-ratate一起使用.x軸(水平)的原點(diǎn)從左側(cè)設(shè)定為30%.

y軸(垂直)的原點(diǎn)從上方設(shè)定為80%.

css代碼:

div.empty-div{position:relative;height:100px;width:100px;margin:30px;padding:10px;border:2px solid black;}

div.green-div{  padding:50px; position:absolute;background-color:LightGreen;border:2px  solid red;transform:rotate(15deg);transform-origin:30% 80%;}

0 0 與左上相同,100% 100%與右下相同.

transform-origin屬性必須與transform屬性一起使用.

translate()方法從當(dāng)前位置移動(dòng)一個(gè)元素(根據(jù)給定的x軸和y軸的參數(shù)).正值會(huì)將元素

向下推到其默認(rèn)位置的右側(cè).而負(fù)值則會(huì)將元素向上并拖至其默認(rèn)位置的左側(cè).

css代碼:

transform:translate(120px,60px);

skew()通過(guò)給元素設(shè)置x軸和y軸的傾斜角度值來(lái)實(shí)現(xiàn)傾斜.

以下例子,沿著x軸將<div>元素傾斜45度

css代碼:

transform:skew(45deg);

-webkit-transform:skew(45deg);

如果沒(méi)有指定第二個(gè)參數(shù),則它的默認(rèn)值為零.

四 css3 scale()函數(shù)和多重變換

scale()方法根據(jù)已設(shè)定的高度和寬度參數(shù)來(lái)增加或減少元素的大小.1代表原始大小,2代表原始尺寸的兩倍,以此類推.

css代碼:

transform:scale(0.7 0.7);

如果只傳遞一個(gè)參數(shù),則默認(rèn)寬度與高度都使用該參數(shù).

一次可以使用多個(gè)轉(zhuǎn)換.比如同時(shí)旋轉(zhuǎn)和縮放元素的大小.對(duì)元素應(yīng)用多個(gè)變換,只需要用空格隔開(kāi)它們.

css代碼:

transform:rotate(35deg) translate(120px);

五 css3關(guān)鍵幀與動(dòng)畫

動(dòng)畫讓一個(gè)元素從一種風(fēng)格變?yōu)榱硪环N風(fēng)格.

你可以根據(jù)需要更改任意數(shù)量的css屬性.

關(guān)鍵幀將保存元素在特定時(shí)間的樣式

@keyframes規(guī)則

當(dāng)你在@keyframes規(guī)則中指定css樣式時(shí),動(dòng)畫將在某些時(shí)間從當(dāng)前樣式逐漸變?yōu)樾聵邮?

要使動(dòng)畫起作用,必須將動(dòng)畫綁定到元素.

以下例子,將更改元素的背景顏色三次:動(dòng)畫完成50%,完成70%,動(dòng)畫完成100%時(shí).

@keyframes animation-name{ 0% {background-color:red;} 50% {background-color:yellow;} 70% {background-color:green;}

100% {background-color:green;} }

animation-name是為動(dòng)畫指定的名字,你可以設(shè)置成任意的名字.

作為百分比的替代方法,你可以使用from和to關(guān)鍵字分別代替0%起始點(diǎn),100%結(jié)束點(diǎn).

要使動(dòng)畫起作用,必須將動(dòng)畫綁定到元素.

在下面的例子中,動(dòng)畫持續(xù)一秒鐘,并將紅色div的背景顏色更改為綠色和藍(lán)色

div.animation{ width:100px;height:100px;background-color:red;animation-name:能否;animation-duration:1s;}

@keyframes 能否{ 0% {background-color:red;} 50%{ background-color:green;} 100%{background-color:blue;} }

背景顏色將在1s內(nèi)自動(dòng)變化.

animation-name:指定動(dòng)畫的名字.

animation-duration:指定所選動(dòng)畫的持續(xù)時(shí)間.

如果為指定animation-duration屬性,則動(dòng)畫將不起作用.因?yàn)槟J(rèn)值是0.

關(guān)于“css3過(guò)渡與轉(zhuǎn)換的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

文章題目：css3過(guò)渡與轉(zhuǎn)換的方法
網(wǎng)站地址：http://jinyejixie.com/article24/jpdcce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、微信公眾號(hào)、云服務(wù)器、靜態(tài)網(wǎng)站、外貿(mào)建站、網(wǎng)站策劃

廣告

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