如何通過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

畫

animation-name: 要對當前元素生效的關鍵幀的名字

animation-name: test;

animation-duration: 動畫的執行時間

animation-duration: 4s;

animation-delay:動畫的延時

animation-delay: 2s;

nimation-iteration-count 動畫執行的次數可選值：

次數
infinite 無限執行

animation-iteration-count: 1;

animation-direction 指定動畫運行的方向可選值：

normal 默認值從 from 向 to運行每次都是這樣
reverse 從 to 向 from 運行每次都是這樣
alternate 從 from 向 to運行重復執行動畫時反向執行
alternate-reverse 從 to 向 from運行重復執行動畫時反向執行

animation-direction: alternate-reverse;

animation-play-state: 設置動畫的執行狀態可選值：

running 默認值動畫執行
paused 動畫暫停

animation-play-state: paused;

animation-fill-mode: 動畫的填充模式可選值：

none 默認值動畫執行完畢元素回到原來位置
forwards 動畫執行完畢元素會停止在動畫結束的位置
backwards 動畫延時等待時，元素就會處于開始位置
both 結合了forwards 和 backwards

animation-fill-mode: both;

混合使用

animation: test 2s 2 1s alternate;

實現動畫

動畫和過渡類似，都是可以實現一些動態的效果，
不同的是過渡需要在某個屬性發生變化時才會觸發
動畫可以自動觸發動態效果
設置動畫效果，必須先要設置一個關鍵幀，關鍵幀設置了動畫執行每一個步驟

@keyframes test {
           /* from表示動畫的開始位置 也可以使用 0% */
           from{
               margin-left: 0;
               background-color: orange;
          }

           /* to動畫的結束位置 也可以使用100%*/
           to{
               background-color: red;
               margin-left: 700px;
          }
      }

變形transform

變形就是指通過CSS來改變元素的形狀或位置
變形不會影響到頁面的布局
transform 用來設置元素的變形效果

translateX() 沿著x軸方向平移
translateY() 沿著y軸方向平移
translateZ() 沿著z軸方向平移
平移元素，百分比是相對于自身計算的
平移：

transform: translateY(-100px);

Z軸平移

設置視距

perspective: 800px;

z軸平移，調整元素在z軸的位置，正常情況就是調整元素和人眼之間的距離，距離越大，元素離人越近
z軸平移屬于立體效果（近大遠小），默認情況下網頁是不支持透視，如果需要看見效果必須要設置網頁的視距

transform: translateZ(800px);

旋轉

通過旋轉可以使元素沿著x y 或 z旋轉指定的角度

rotateX()
rotateY()
rotateZ()

transform: rotateY(180deg);

/* 是否顯示元素的背面 */
backface-visibility: hidden;

縮放

變形的原點默認值 center
修改原點

transform-origin:20px 20px;

對元素進行縮放的函數：

scaleX() 水平方向縮放
scaleY() 垂直方向縮放
scale() 雙方向的縮放

transform:scale(2)

背景顏色

background-color 設置背景顏色

background-color: #bfa;

背景圖片

background-image 設置背景圖片

可以同時設置背景圖片和背景顏色，這樣背景顏色將會成為圖片的背景色
如果背景的圖片小于元素，則背景圖片會自動在元素中平鋪將元素鋪滿
如果背景的圖片大于元素，將會一個部分背景無法完全顯示
如果背景圖片和元素一樣大，則會直接正常顯示

background-image: url("./img/1.png");

背景重復方式

background-position 用來設置背景圖片的位置

通過 top left right bottom center 幾個表示方位的詞來設置背景圖片的位置
使用方位詞時必須要同時指定兩個值，如果只寫一個則第二個默認就是center
通過偏移量來指定背景圖片的位置：水平方向的偏移量垂直方向變量
設置方式：

background-position: center;

background-position: -50px 300px;

背景范圍

background-clip

border-box 默認值，背景會出現在邊框的下邊
padding-box 背景不會出現在邊框，只出現在內容區和內邊距
content-box 背景只會出現在內容區
可選值：

background-origin 背景圖片的偏移量計算的原點

padding-box 默認值，background-position從內邊距處開始計算
content-box 背景圖片的偏移量從內容區處計算
border-box 背景圖片的變量從邊框處開始計算

background-origin: border-box;
           background-clip: content-box;

背景圖片大小

background-size 設置背景圖片的大小

第一個值表示寬度
第二個值表示高度
- 如果只寫一個，則第二個值默認是 auto

cover 圖片的比例不變，將元素鋪滿
contain 圖片比例不變，將圖片在元素中完整顯示

background-size: contain;

背景圖片是否隨元素移動

background-attachment背景圖片是否跟隨元素移動

scroll 默認值背景圖片會跟隨元素移動
fixed 背景會固定在頁面中，不會隨元素移動
可選值：

注意

backgound 背景相關的簡寫屬性，所有背景相關的樣式都可以通過該樣式來設置
并且該樣式沒有順序要求，也沒有哪個屬性是必須寫的
background-size必須寫在background-position的后邊，并且使用/隔開 background-position/background-size
background-origin background-clip 兩個樣式，orgin要在clip的前邊

、制作網頁動畫(了解)

本章目標

會使用transform 2D變形設置網頁元素樣式
會使用transition制作過渡動畫
會使用animation制作網頁動畫

如何在網頁中實現動畫效果？

動態圖片
Flash
JavaScript

Flash需要插件支持，文件體積大從這次課開始學習使用CSS代碼來完成動畫：存在兼容性問題

CSS3變形
CSS3過渡
CSS3動畫

6.1、CSS變形

CSS3變形是一些效果的集合
如平移、旋轉、縮放、傾斜效果
簡言之，平移就是一個變形，旋轉就是一個變形。。。

每個效果都可以稱為變形（transform），它們可以分別操控元素發生平移、旋轉、縮放、傾斜等變化

在這里插入圖片描述

在線咨詢

上一篇：HTML5游戲怎么做？
下一篇：廣州藍景技術分享—CSS中實現元素的隱藏方法

您的項目需求

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

整合營銷服務商

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

畫

實現動畫

變形transform

Z軸平移

設置視距

旋轉

縮放

背景顏色

背景圖片

背景重復方式

背景范圍

背景圖片大小

背景圖片是否隨元素移動

注意

、制作網頁動畫(了解)

6.1、CSS變形

您的項目需求