css3過渡與轉換的方法

這篇文章主要介紹“css3過渡與轉換的方法”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“css3過渡與轉換的方法”文章能幫助大家解決問題。

一 css3過渡 轉換

css3過渡(transition)允許我們在限定的時間內從一個屬性值轉變到另一個屬性值.

●transition-property:指定要轉換的屬性

●transition-duration:指定轉換發生的持續時間

●transition-timing-function:指定轉換的速度在其持續時間內如何變化

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

在下面的例子中,我們將transition屬性設置為持續時間為5s的轉換效果.并設置ease-in定時函數,該函數有淡入的效果.

css代碼:

transition:transform 5s ease-in;

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

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

css代碼:

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

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

效果如下:

如果你將光標懸停在div元素上,則會從左向右移動.

當光標被移出div元素時,它將逐漸變回原來的樣式.

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

它可以有以下值:

ease:動畫開始緩慢,然后加速(默認值)

ease-in:緩慢開始,然后加速,突然停止.

ease-out:快速啟動,但減速停止.

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

linear:勻速轉換

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

css代碼:

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

二 css3 transform:rotate()

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

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

css3支持2d和3d轉換.

設置15deg的角度旋轉(順時針方向旋轉),css代碼如下:

transform:totate(15deg);

正值,順時針旋轉;負值,逆時針旋轉.

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

transition-origin(原點)屬性允許你更改要轉換元素的位置.該屬性的默認值是50% 50%,對應于元素的中間.

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

y軸(垂直)的原點從上方設定為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()方法從當前位置移動一個元素(根據給定的x軸和y軸的參數).正值會將元素

向下推到其默認位置的右側.而負值則會將元素向上并拖至其默認位置的左側.

css代碼:

transform:translate(120px,60px);

skew()通過給元素設置x軸和y軸的傾斜角度值來實現傾斜.

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

css代碼:

transform:skew(45deg);

-webkit-transform:skew(45deg);

如果沒有指定第二個參數,則它的默認值為零.

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

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

css代碼:

transform:scale(0.7 0.7);

如果只傳遞一個參數,則默認寬度與高度都使用該參數.

一次可以使用多個轉換.比如同時旋轉和縮放元素的大小.對元素應用多個變換,只需要用空格隔開它們.

css代碼:

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

五 css3關鍵幀與動畫

動畫讓一個元素從一種風格變為另一種風格.

你可以根據需要更改任意數量的css屬性.

關鍵幀將保存元素在特定時間的樣式

@keyframes規則

當你在@keyframes規則中指定css樣式時,動畫將在某些時間從當前樣式逐漸變為新樣式.

要使動畫起作用,必須將動畫綁定到元素.

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

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

100% {background-color:green;} }

animation-name是為動畫指定的名字,你可以設置成任意的名字.

作為百分比的替代方法,你可以使用from和to關鍵字分別代替0%起始點,100%結束點.

要使動畫起作用,必須將動畫綁定到元素.

在下面的例子中,動畫持續一秒鐘,并將紅色div的背景顏色更改為綠色和藍色

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內自動變化.

animation-name:指定動畫的名字.

animation-duration:指定所選動畫的持續時間.

如果為指定animation-duration屬性,則動畫將不起作用.因為默認值是0.

關于“css3過渡與轉換的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。