如何通過css樣式設置動畫，轉換，過渡等界面效果

天我們學習的內容有：過渡，動畫，轉換，伸縮盒子。

可以說今天學習的內容都是重量級的大佬，學好了，使用css3做出酷炫的效果 So Easy！~~

1.過渡

在css3中，有一個屬性可以設置過渡效果。

它就是transition，所謂的過渡效果，指的就是以動畫的形式慢慢演化樣式屬性變化的過程。

A.案例：通過transition設置焦點過渡效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>

注意頁面中的代碼：

第一，我們給div添加了一個hover偽類樣式，當我們鼠標懸停在div上方的時候，會給div盒子添加一個藍色的盒子陰影。

第二，我們給div盒子添加了一個transition樣式，設置的值為：all 1s linear 0.3s;

這四個數據分別對應

transition-property(需要過渡的屬性)：如果設置為all表示所有樣式屬性都需要過渡。

transition-duration(過渡的時間):以秒作為單位，設置過渡的時間

transition-timing-function(過渡的方式):常用的有linear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等

transition-delay(延遲的時間):以秒作為單位進行延遲，延遲之后開始進行過渡效果。

所以，我們通過transition這個復合屬性設置的過渡效果為：

all:需要過渡所有的屬性

1s:過渡的時間為1秒

linear:勻速過渡

0.3s:在延遲0.3秒之后開始過渡動畫。

如果大家理解了上面的描述，那么也就不難理解咱們鼠標放到div上之后，為啥會慢慢出現藍色的光暈了，就是因為咱們添加了過渡，所以，慢慢的就會給盒子添加陰影效果。

2.動畫：

在學習完了過渡之后，發現咱們可以使用transition去以動畫的形式展示樣式的改變以及變化的過程，這可以幫助我們來實現一些過渡的動畫。

但是，有的時候，我們的需求會更加的復雜，要求會更加的多變，那么，transition可能就無法滿足我們的需要了，我們需要有更加炫酷，復雜的效果呈現。

那么，動畫animation就可以滿足我們的需要。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>

代碼效果如下：

同樣，讓我們來關注編寫的代碼：

1.在樣式中，首先我們使用@keyframes 來定義了一個復雜的動畫，在css3中，新增了@keyframes可以來幫助我們添加動畫。代碼如下：

/*動畫的名字叫做moveAndChange*/

@keyframes moveAndChange{

/*動畫最初的時候，將left設置為0px，top設置為0px*/

0%{

left:0px;

top:0px;

}

/*當動畫進行到25%的時候，使用動畫將left過渡到200px，top過渡到200px，

背景顏色過渡為綠色，圓角過渡為0(無圓角)*/

25%{

left:200px;

top:200px;

background:green;

border-radius: 0;

}

/*當動畫進行到50%的時候，使用動畫將left過渡到400px，top過渡到200px，

背景顏色過渡為藍色，圓角過渡為50%(正圓)*/

50%{

left:400px;

top:200px;

background:blue;

border-radius: 50%;

}

/*當動畫進行到75%的時候，使用動畫將left過渡到400px，top過渡到0，

背景顏色過渡為灰色，圓角過渡為0(無圓角)*/

75%{

left:400px;

top:0px;

background:#ccc;

border-radius: 0;

}

/*當動畫結束的時候，使用動畫將left過渡到0x，top過渡到0px，

背景顏色過渡為紅色，圓角過渡為50%(正圓)*/

100%{

left:0px;

top:0px;

background:red;

border-radius: 50%;

}

這是一個比較復雜的動畫效果，可以發現，它通過百分比的形式將一個完整的動畫拆分成了5個部分，每個部分都有不同的樣式效果，而當我們采用該動畫的元素就會按照設置的順序和樣式效果進行動畫的過渡和展示。

2.上面我們只是通過@keyframes創建了一個動畫，我們還需要通過特定的語法來使用這個動畫。

就是下面這句代碼了：

animation: moveAndChange 5s linear 0.5s infinite normal;

它是一個復合屬性，設置了6個值，分別對應：

animation-name(設置動畫的名稱)：用來設置動畫的名字，我們這里寫的是moveAndChange ，也就是說我們就是要使用我們剛剛創建的動畫。

animation-duration(設置整個動畫的時間):以秒作為單位，我們這里寫的是5s，表示整個動畫的時間為5秒

animation-timing-function(設置播放動畫的方式)：播放動畫的方式，常用的有linear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我們使用的是linear勻速播放動畫。

animation-delay(設置動畫的延遲):以秒作為單位，我們寫的是0.5s，表示延遲0.5秒之后開始播放動畫。

animation-iteration-count(設置動畫播放的次數):播放動畫的次數，我們這里寫的是infinite ，表示動畫將會被播放無限次，如果寫數字，那么就會播放數字對應的次數。

animation-direction(設置是否反向播放動畫)：我們寫的是normal，表示正常播放動畫，如果寫的是

alternate則表示要反向播放動畫，大家也可以自己試一試這個效果。

最終，我們通過@keyframes創建動畫，通過animation設置動畫，成功完成了這個復雜的動畫效果。

3.轉換

在css3中，我們通過transform屬性可以設置元素的轉換效果，具體的效果如下：

A.平移

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來div盒子的位置是left:0,top:0;

但是我們通過transform: translate(300px,300px);將盒子進行了偏移，所以，盒子的位置發生了改變。

B.旋轉

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來div盒子應該是四四方方的。

但是，經過我們的代碼transform: rotate(45deg); //deg為單位，表示度數。

進行了45度的旋轉之后，呈現出來的就是一個菱形的盒子了，旋轉的正方向為順時針，負方向為逆時針。

C.縮放

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來盒子的寬高為200*200,而我們通過transform: scale(0.5,0.25);進行的縮放

scale的第一個參數為0.5,表示橫向縮小為0.5倍

scale的第二個參數為0.25，表示縱向縮小為0.25倍。

scale的參數如果為1，則表示不進行任何縮放，小于1就是做縮小，而大于1表示做放大。

小結：transform轉換中其實還包含了skew(傾斜)，matrix(矩陣轉換)，相對來說用到的不是特別多，所以在本文中我們便不再做介紹。

4.flex布局

Flex布局，可以簡便、完整、響應式地實現各種頁面布局。

Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

代碼效果如下：

如圖所示，咱們通過display:flex將.parent元素設置為了flex盒子，那么子元素將會按照justify-content設置的方式進行元素的排列，目前看來，和我們沒有設置flex盒子的效果是一致的。

接下來我們更改一下，將justify-content設置為flex-end，效果如下圖所示：

所以我們就應該發現，flex-start是讓所有的子元素從父元素的左側開始排列

而flex-end是讓所有的子元素從元素的右側開始排列。

我們再來更改一下，將justify-content設置為center，效果如下圖所示：

更厲害了，子元素在父盒子的中央位置排列顯示了。

然后，我們再將justify-content設置為space-around，效果如下圖所示：

它是平均分配的形式為每一個子元素設置了間距，但是看起來有點變扭。

所以我們推薦將justify-content設置為space-between，效果如下圖：

我們還可以通過flex-wrap來設置子元素是否換行顯示，以及flex-direction設置子元素排列的順序。

這兩個屬性可以設置的值如下：

flex-wrap: nowrap;//不換行，會自動收縮

flex-wrap: warp;//換行，會自動收縮

flex-wrap: warp-reverse;//反轉，從默認的從上到下排列反轉為從下到上。

flex-direction:row; //從左至右一行一行進行子元素的排列

flex-direction:column; //從上到下一列一列進行子元素的排列

flex-direction:row-reverse; //從右至左一行一行進行子元素的排列

flex-direction:column-reverse; //從下到上一列一列進行子元素的排列

案例代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>

我們設置了flex-wrap: nowrap;（不換行，壓縮所有的子元素在一行中顯示），以及flex-direction: row-reverse;（反向排列）

代碼效果如下：

如果設置為flex-wrap: warp（換行顯示無法在一行顯示的子元素），則效果如下：

如果將flex-direction: column;,則會縱向排列元素，效果如下圖：

除了上面的這些給伸縮盒子父元素設置的樣式之外，我們還可以可以伸縮盒子的子元素設置flex屬性，用來設置平均分配整個父盒子的空間。

代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下：

如上圖所示，每個盒子平均分配了父盒子的空間，原本寬度為20%，現在被拉伸了。

除此之外，咱們還可以使用flex屬性進行進一步的設置，代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下圖：

我們分別給四個子盒子設置了flex:1 , flex:2, flex:2 ,flex:1.

這是什么意思呢？

四個flex加起來一共是6.那么第一個盒子就占據整個父盒子的1/6寬度。

同理，另外三個盒子分別占據2/6,2/6,1/6的寬度，所以就形成了我們現在看到的效果。

原文來源于：黑馬程序員社區

學習資源：

想學習css，可以關注：黑馬程序員頭條號，后臺回復：css

SS 在您可以修改的內容方面非常強大，并且該transform屬性是最通用和最強大的 CSS 屬性之一。在本文中，我將介紹使用transform屬性修改 CSS 元素的所有方法。

什么是變換屬性？

CSS 中的transform屬性只是一種您可以在一個屬性中旋轉、縮放、移動等元素的方式。由于這種靈活性，如果起初使用起來可能會令人困惑，但本文將消除所有這些困惑。

.class {
  transform: rotate(90deg) scale(2) translate(100px, 200px);
}

transform通過組合多個變換函數來獲得所需的輸出，因此為了理解transform您需要了解每個transform函數。

rotate

可能最容易理解的變換函數是rotate. 此函數采用單個參數，即旋轉元素的角度。正值將導致順時針旋轉，負值將導致逆時針旋轉。

.red {
  transform: rotate(10deg);
}
.green {
  transform: rotate(-45deg);
}
.blue {
  transform: rotate(.25turn);
}

正如您在上面的示例中看到的，我們使用deg和turn單位來定義我們的旋轉。deg單位從 0 到 360，而turn單位從 0 到 1。

3D 旋轉

rotateX您還可以使用、rotateY和rotateZ函數進行 3D 旋轉。該rotateZ功能的工作原理與rotate.

rotateX將在水平軸上rotateY旋轉一個元素，并將在垂直軸上旋轉一個元素。這些可用于翻轉元素。

.red {
  transform: rotateX(60deg);
}
.green {
  transform: rotateY(60deg);
}
.blue {
  transform: rotateX(.2turn) rotateY(.2turn);
}

如您所見，我們在 3D 空間中旋轉元素，使其看起來被擠壓。這種旋轉實際上只在處理 3D 元素時才有用。

scale

scale是另一個很容易理解的函數。它可以采用一個或兩個參數來確定元素大小的縮放比例。大于 1 的數字會使元素變大，而小于 1 的數字會縮小元素。

.red {
  transform: scale(1.25);
}
.green {
  transform: scale(.5);
}
.blue {
  transform: scale(1.25, .75);
}

當一個參數被傳遞給scale它時，它會根據傳遞的數字縮放 X 和 Y 軸相同的量。當兩個值傳遞給scale第一個數字時，將縮放 X 軸，第二個數字將縮放 Y 軸。

此外，如果您愿意，可以使用scaleXandscaleY函數來縮放 X 或 Y 軸。這些函數采用一個參數并在相應軸上縮放元素。

3D 比例

就像rotate您可以在 3D 中縮放一樣。為此，您將使用與 and 類似的函數scaleZ，但用于 Z 軸。這同樣只對 3D 元素有用。scaleX``scaleY

translate

可能我最喜歡的轉換元素的方法是使用translate函數。這個函數像scale函數一樣接受一個或兩個參數，并將根據提供的值移動一個元素。

.red {
  transform: translate(25px);
}
.green {
  transform: translate(-25px, 25px);
}
.blue {
  transform: translate(0, -25px);
}

透明的彩色箭頭表示形狀通常放置的位置，而不透明的箭頭表示它們在平移后的位置。

你會注意到，當只有一個值被傳遞給它時，translate它只會影響 X 軸，因此元素向右移動 25 個像素，因為它是一個正值。

當將兩個值傳遞給translate第一個值時，會在 X 軸上移動元素，而第二個值會影響 Y 軸的位置。這意味著綠色箭頭向左移動 25 個像素，向下移動 25 個像素。正 Y 值將元素向下移動似乎令人困惑，因為我們通常認為正 Y 意味著向上，但在 Web 開發中，正 Y 值意味著元素在頁面中向下移動。

最后，藍色箭頭向上移動了 25 個像素，因為第一個參數設置為 0，第二個參數設置為負 25 個像素。

就像 scale 一樣，有一個translateX和translateY函數可以一次只在一個方向上移動一個元素。

百分比translate

該translate屬性處理百分比的方式與幾乎所有其他 CSS 屬性不同，因為它基于元素的大小而不是其父級的大小。

.red {
  transform: translate(100%);
}

正如你所看到的，當我們用百分比平移時，我們將元素向右移動了其自身寬度的 100%。這對于通過將元素移動其自身寬度的 50% 或將元素彼此偏移其大小的百分比來使元素居中非常有用。

3D translate

您現在可能已經猜到了，但translate也可以在 3D 中使用。您可以使用translateZ僅修改 Z 軸的函數或translate3D類似的函數translate，但接受第三個參數來在 Z 軸上移動元素。同樣，這僅對 3D 元素有用。

偏斜

可能所有transform功能中最沒用的是skew. 它允許您通過傾斜形狀的邊緣來拉伸形狀。該skew函數接受一兩個參數，就像translate.

.red {
  transform: skew(25deg);
}
.green {
  transform: skew(15deg, 25deg);
}
.blue {
  transform: skew(-15deg, -25deg);
}

如您所見，skew 屬性在 X 和 Y 方向上拉伸了我們的形狀。通過指定一個參數，我們只在 X 方向上傾斜，而如果我們傳遞兩個屬性，第一個在 X 方向上傾斜，第二個在 Y 方向上傾斜。

此外，就像translate您可以使用skewX和skewY在一個方向上傾斜元素而不影響其他方向一樣。

3D 傾斜

不同的是，所有其他transform屬性skew都沒有任何 3D 版本。

組合變換

到目前為止，我們已經討論了單獨使用轉換，但是如果您想使用多個轉換怎么辦？這實際上非常簡單，因為您可以傳遞任意數量的函數transform。

.red {
  transform: rotate(25deg) scale(.5) translateX(50px);
}
.green {
  transform: rotate(-.5turn) translateX(-10%);
}
.blue {
  transform: scaleX(1.2) scaleY(.8);
}

組合轉換變得困難的唯一時候是當您想要在不同的類中修改它們時。

.base-class {
  transform: scale(1.2) translateX(5px);
}
.big {
  transform: scale(2) translateX(5px);
}
.move {
  transform: scale(1.2) translateX(100px);
}
.big.move {
  transform: scale(2) translateX(100px);
}

由于transform是一個屬性，您需要在修改的每個類之間復制所有值，transform因為如果您只是transform: scale(2)在.big類中寫入，它將覆蓋整個transform而不只是scale部分。幸運的是，我們可以巧妙地使用 CSS 變量來解決這個問題。

.base-class {
  transform: scale(var(--scale, 1.2)) translateX(var(--translate-x, 5px));
}
.big {
  --scale: 2;
}
.move {
  --translate-x: 100px;
}

如您所見，我們現在只更改 CSS 變量，而從未修改實際transform屬性。

結論

總體而言，CSStransform非常有用，同時也非常易于理解。到目前為止，最難的部分transform是理解如何跨不同類組合多個變換，但在 CSS 變量的幫助下，這個問題是微不足道的。

SS代碼以及最后平移效果見下方

<style type="text/css">
div{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation-name:mymove;            /*定義動畫名稱*/
	animation-duration:5s;            /*定義動畫時間*/
	animation-timing-function:linear; /*定義動畫速度曲線*/
	animation-delay:2s;               /*定義動延遲時間*/
	animation-iteration-count:3;      /*定義動畫的播放次數*/
	animation-direction:alternate;    /*定義動畫播放的方向*/
	/* Safari and Chrome瀏覽器兼容代碼 */
	-webkit-animation-name:mymove;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:2s;
	-webkit-animation-iteration-count:3;
	-webkit-animation-direction:alternate;
	}
@keyframes mymove{
	from {left:0px;}
	to {left:200px;}
	}
@-webkit-keyframes mymove{       /* Safari and Chrome瀏覽器兼容代碼*/
	from {left:0px;}             /*動畫開始和結束時的狀態*/
	to {left:200px;}             /*動畫中間時的狀態*/
}
</style>

1、transition-property屬性

transition-property 屬性用于指定應用過渡效果的CSS屬性的名稱，其過渡效果通常在用戶將指針移動到元素上時發生。當指定的CSS屬性改變時，過渡效果才開始。其基本語法格式如下：

transition-property: none | all | property;

在上面的語法格式中，transition-property 屬性的取值包括none、all和property三個，具體說明如下表所示：

屬性值	描述
none	沒有屬性會獲得過渡效果。
all	所有屬性都將獲得過渡效果。
property	定義應用過渡效果的CSS屬性名稱，多個名稱之間以逗號分隔。

2、transition-duration屬性

transition-duration屬性用于定義過渡效果花費的時間，默認值為0，常用單位是秒（s）或者毫秒（ms）。其基本語法格式如下：

transition-duration:time;

3、transition-timing-function屬性

transition-timing-function屬性規定過渡效果的速度曲線，默認值為ease，其基本語法格式如下：

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

transition-timing-function屬性的取值有很多，常見屬性值及說明如下表所示。

屬性值	描述
linear	指定以相同速度開始至結束的過渡效果，等同于cubic-bezier(0,0,1,1)）。
ease	指定以慢速開始，然后加快，最后慢慢結束的過渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。
ease-in	指定以慢速開始，然后逐漸加快（淡入效果）的過渡效果，等同于cubic-bezier(0.42,0,1,1）。
ease-out	指定以慢速結束（淡出效果）的過渡效果，等同于cubic-bezier(0,0,0.58,1）。
ease-in-out	指定以慢速開始和結束的過渡效果，等同于cubic-bezier(0.42,0,0.58,1）。
cubic-bezier(n,n,n,n)	定義用于加速或者減速的貝塞爾曲線的形狀，它們的值在0~1之間。

4、transition-delay屬性

transition-delay屬性規定過渡效果何時開始，默認值為0，常用單位是秒（s）或者毫秒（ms）。transition-delay的屬性值可以為正整數、負整數和0。當設置為負數時，過渡動作會從該時間點開始，之前的動作被截斷；設置為正數時，過渡動作會延遲觸發。其基本語法格式如下：

transition-delay:time;

5、transition屬性

transition屬性是一個復合屬性，用于在一個屬性中設置transition-property、transition-duration、transition-timing-function、transition-delay四個過渡屬性。其基本語法格式如下

transition：property duration timing-function delay;

在使用transition屬性設置多個過渡效果時，它的各個參數必須按照順序進行定義，不能顛倒。

在線咨詢

上一篇：WordPress主題開發教程二十五：留言模板
下一篇：看日出天空云彩的文案

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

如何通過css樣式設置動畫，轉換，過渡等界面效果

什么是變換屬性？

rotate

3D 旋轉

scale

3D 比例

translate

百分比translate

3D translate

偏斜

3D 傾斜

組合變換

結論

您的項目需求