整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
圖1
圖2
源碼完整，需要的朋友可以下載學(xué)習(xí)（圖3）
圖3
講解CSS過(guò)渡和動(dòng)畫 transition/animation：全方位深入實(shí)踐指南
**引言：賦予網(wǎng)頁(yè)動(dòng)態(tài)生命力**
CSS過(guò)渡（Transition）與動(dòng)畫（Animation）是現(xiàn)代Web前端開發(fā)中不可或缺的設(shè)計(jì)元素，它們使靜態(tài)網(wǎng)頁(yè)變得生動(dòng)活潑，極大地提升了用戶體驗(yàn)。本文旨在以全面且易于理解的方式講解CSS過(guò)渡與動(dòng)畫的工作原理、應(yīng)用場(chǎng)景及其具體實(shí)現(xiàn)方法，輔以實(shí)例代碼，幫助您更好地理解和掌握這一關(guān)鍵技術(shù)。
---
### **一、CSS過(guò)渡基礎(chǔ)概念**
**標(biāo)題：走進(jìn)CSS Transition的世界**
**1. 過(guò)渡是什么？**
CSS過(guò)渡是一種視覺效果，它能夠在CSS屬性值發(fā)生變化時(shí)平滑地過(guò)渡。例如，當(dāng)鼠標(biāo)懸停在一個(gè)元素上時(shí)，其背景顏色可以從白色逐漸過(guò)渡到黑色。
**2. 如何定義過(guò)渡？**
過(guò)渡由三個(gè)關(guān)鍵部分組成：**觸發(fā)器**（何時(shí)啟動(dòng)過(guò)渡）、**持續(xù)時(shí)間**（過(guò)渡多久完成）以及**執(zhí)行方式**（如何變化）。
```css
/* 基礎(chǔ)過(guò)渡設(shè)置 */
.example {
transition: property duration timing-function delay;
}
/* 示例 */
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease-in-out;
}
```
在此示例中，`.box`元素的背景色會(huì)在屬性值改變時(shí)，在0.5秒內(nèi)平滑過(guò)渡。
---
### **二、過(guò)渡觸發(fā)方式**
**標(biāo)題：觸發(fā)動(dòng)畫的關(guān)鍵時(shí)刻**
過(guò)渡通常在CSS屬性值發(fā)生改變時(shí)自動(dòng)觸發(fā)，常見的觸發(fā)方式有：
- **偽類觸發(fā)**（`:hover`, `:focus`, `:active`等）
- **JavaScript操作觸發(fā)**（通過(guò)更改DOM元素樣式）
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease-in-out;
}
.box:hover {
background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
```
在這個(gè)例子中，當(dāng)鼠標(biāo)懸停在`.box`元素上時(shí)，背景顏色會(huì)通過(guò)過(guò)渡效果變藍(lán)。
---
### **三、CSS動(dòng)畫進(jìn)階詳解**
**標(biāo)題：構(gòu)建復(fù)雜的動(dòng)畫效果**
CSS動(dòng)畫比過(guò)渡更為靈活，允許開發(fā)者定義一系列關(guān)鍵幀（@keyframes），并在指定時(shí)間段內(nèi)逐步變換樣式。
**1. 創(chuàng)建關(guān)鍵幀規(guī)則**
```css
@keyframes fadeInOut {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
```
上述代碼定義了一個(gè)名為`fadeInOut`的動(dòng)畫，元素將在動(dòng)畫期間經(jīng)歷透明度從0到1再到0的變化。
**2. 應(yīng)用動(dòng)畫**
```css
.box {
animation-name: fadeInOut;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
```
通過(guò)`animation-*`系列屬性，我們將`fadeInOut`動(dòng)畫應(yīng)用于`.box`元素，使其無(wú)限循環(huán)交替播放，每次持續(xù)2秒。
---
### **四、動(dòng)畫高級(jí)特性**
**標(biāo)題：探索動(dòng)畫的更多可能性**
- **動(dòng)畫填充模式**（animation-fill-mode）控制動(dòng)畫結(jié)束后元素的樣式狀態(tài)。
- **動(dòng)畫延時(shí)**（animation-delay）決定動(dòng)畫何時(shí)開始。
- **動(dòng)畫播放次數(shù)**（animation-iteration-count）可設(shè)置動(dòng)畫循環(huán)次數(shù)，甚至使用`infinite`無(wú)限循環(huán)。
- **動(dòng)畫方向**（animation-direction）影響動(dòng)畫是否逆序播放。
---
### **五、綜合案例分析**
**標(biāo)題：實(shí)際項(xiàng)目中的CSS過(guò)渡與動(dòng)畫運(yùn)用**
此處可以結(jié)合實(shí)際項(xiàng)目需求，給出一個(gè)或多個(gè)包含復(fù)雜過(guò)渡和動(dòng)畫交互的HTML+CSS示例，比如響應(yīng)式導(dǎo)航菜單的展開收起動(dòng)畫、輪播圖切換過(guò)渡效果等，以增強(qiáng)文章的實(shí)用性。
---
**結(jié)語(yǔ)：**
熟練掌握CSS過(guò)渡和動(dòng)畫，能讓您的網(wǎng)頁(yè)設(shè)計(jì)更具表現(xiàn)力和吸引力。無(wú)論是微小的UI細(xì)節(jié)還是復(fù)雜的交互場(chǎng)景，善用過(guò)渡和動(dòng)畫都能有效提升用戶體驗(yàn)。記住，適時(shí)適度的動(dòng)態(tài)效果才是錦上添花，過(guò)度則可能適得其反。希望通過(guò)這篇文章，您能夠洞悉CSS過(guò)渡與動(dòng)畫的奧秘，并在實(shí)踐中游刃有余地運(yùn)用這些強(qiáng)大的工具。
天我們學(xué)習(xí)的內(nèi)容有：過(guò)渡，動(dòng)畫，轉(zhuǎn)換，伸縮盒子。
可以說(shuō)今天學(xué)習(xí)的內(nèi)容都是重量級(jí)的大佬，學(xué)好了，使用css3做出酷炫的效果 So Easy！~~
1.過(guò)渡
在css3中，有一個(gè)屬性可以設(shè)置過(guò)渡效果。
它就是transition，所謂的過(guò)渡效果，指的就是以動(dòng)畫的形式慢慢演化樣式屬性變化的過(guò)程。
A.案例：通過(guò)transition設(shè)置焦點(diǎn)過(guò)渡效果
<!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>
注意頁(yè)面中的代碼：
第一，我們給div添加了一個(gè)hover偽類樣式，當(dāng)我們鼠標(biāo)懸停在div上方的時(shí)候，會(huì)給div盒子添加一個(gè)藍(lán)色的盒子陰影。
第二，我們給div盒子添加了一個(gè)transition樣式，設(shè)置的值為：all 1s linear 0.3s;
這四個(gè)數(shù)據(jù)分別對(duì)應(yīng)
transition-property(需要過(guò)渡的屬性)：如果設(shè)置為all表示所有樣式屬性都需要過(guò)渡。
transition-duration(過(guò)渡的時(shí)間):以秒作為單位，設(shè)置過(guò)渡的時(shí)間
transition-timing-function(過(guò)渡的方式):常用的有l(wèi)inear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等
transition-delay(延遲的時(shí)間):以秒作為單位進(jìn)行延遲，延遲之后開始進(jìn)行過(guò)渡效果。
所以，我們通過(guò)transition這個(gè)復(fù)合屬性設(shè)置的過(guò)渡效果為：
all:需要過(guò)渡所有的屬性
1s:過(guò)渡的時(shí)間為1秒
linear:勻速過(guò)渡
0.3s:在延遲0.3秒之后開始過(guò)渡動(dòng)畫。
如果大家理解了上面的描述，那么也就不難理解咱們鼠標(biāo)放到div上之后，為啥會(huì)慢慢出現(xiàn)藍(lán)色的光暈了，就是因?yàn)樵蹅兲砑恿诉^(guò)渡，所以，慢慢的就會(huì)給盒子添加陰影效果。
2.動(dòng)畫：
在學(xué)習(xí)完了過(guò)渡之后，發(fā)現(xiàn)咱們可以使用transition去以動(dòng)畫的形式展示樣式的改變以及變化的過(guò)程，這可以幫助我們來(lái)實(shí)現(xiàn)一些過(guò)渡的動(dòng)畫。
但是，有的時(shí)候，我們的需求會(huì)更加的復(fù)雜，要求會(huì)更加的多變，那么，transition可能就無(wú)法滿足我們的需要了，我們需要有更加炫酷，復(fù)雜的效果呈現(xiàn)。
那么，動(dòng)畫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>
代碼效果如下：
同樣，讓我們來(lái)關(guān)注編寫的代碼：
1.在樣式中，首先我們使用@keyframes 來(lái)定義了一個(gè)復(fù)雜的動(dòng)畫，在css3中，新增了@keyframes可以來(lái)幫助我們添加動(dòng)畫。代碼如下：
/*動(dòng)畫的名字叫做moveAndChange*/
@keyframes moveAndChange{
/*動(dòng)畫最初的時(shí)候，將left設(shè)置為0px，top設(shè)置為0px*/
0%{
left:0px;
top:0px;
}
/*當(dāng)動(dòng)畫進(jìn)行到25%的時(shí)候，使用動(dòng)畫將left過(guò)渡到200px，top過(guò)渡到200px，
背景顏色過(guò)渡為綠色，圓角過(guò)渡為0(無(wú)圓角)*/
25%{
left:200px;
top:200px;
background:green;
border-radius: 0;
}
/*當(dāng)動(dòng)畫進(jìn)行到50%的時(shí)候，使用動(dòng)畫將left過(guò)渡到400px，top過(guò)渡到200px，
背景顏色過(guò)渡為藍(lán)色，圓角過(guò)渡為50%(正圓)*/
50%{
left:400px;
top:200px;
background:blue;
border-radius: 50%;
}
/*當(dāng)動(dòng)畫進(jìn)行到75%的時(shí)候，使用動(dòng)畫將left過(guò)渡到400px，top過(guò)渡到0，
背景顏色過(guò)渡為灰色，圓角過(guò)渡為0(無(wú)圓角)*/
75%{
left:400px;
top:0px;
background:#ccc;
border-radius: 0;
}
/*當(dāng)動(dòng)畫結(jié)束的時(shí)候，使用動(dòng)畫將left過(guò)渡到0x，top過(guò)渡到0px，
背景顏色過(guò)渡為紅色，圓角過(guò)渡為50%(正圓)*/
100%{
left:0px;
top:0px;
background:red;
border-radius: 50%;
}
}
這是一個(gè)比較復(fù)雜的動(dòng)畫效果，可以發(fā)現(xiàn)，它通過(guò)百分比的形式將一個(gè)完整的動(dòng)畫拆分成了5個(gè)部分，每個(gè)部分都有不同的樣式效果，而當(dāng)我們采用該動(dòng)畫的元素就會(huì)按照設(shè)置的順序和樣式效果進(jìn)行動(dòng)畫的過(guò)渡和展示。
2.上面我們只是通過(guò)@keyframes創(chuàng)建了一個(gè)動(dòng)畫，我們還需要通過(guò)特定的語(yǔ)法來(lái)使用這個(gè)動(dòng)畫。
就是下面這句代碼了：
animation: moveAndChange 5s linear 0.5s infinite normal;
它是一個(gè)復(fù)合屬性，設(shè)置了6個(gè)值，分別對(duì)應(yīng)：
animation-name(設(shè)置動(dòng)畫的名稱)：用來(lái)設(shè)置動(dòng)畫的名字，我們這里寫的是moveAndChange ，也就是說(shuō)我們就是要使用我們剛剛創(chuàng)建的動(dòng)畫。
animation-duration(設(shè)置整個(gè)動(dòng)畫的時(shí)間):以秒作為單位，我們這里寫的是5s，表示整個(gè)動(dòng)畫的時(shí)間為5秒
animation-timing-function(設(shè)置播放動(dòng)畫的方式)：播放動(dòng)畫的方式，常用的有l(wèi)inear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我們使用的是linear勻速播放動(dòng)畫。
animation-delay(設(shè)置動(dòng)畫的延遲):以秒作為單位，我們寫的是0.5s，表示延遲0.5秒之后開始播放動(dòng)畫。
animation-iteration-count(設(shè)置動(dòng)畫播放的次數(shù)):播放動(dòng)畫的次數(shù)，我們這里寫的是infinite ，表示動(dòng)畫將會(huì)被播放無(wú)限次，如果寫數(shù)字，那么就會(huì)播放數(shù)字對(duì)應(yīng)的次數(shù)。
animation-direction(設(shè)置是否反向播放動(dòng)畫)：我們寫的是normal，表示正常播放動(dòng)畫，如果寫的是
alternate則表示要反向播放動(dòng)畫，大家也可以自己試一試這個(gè)效果。
最終，我們通過(guò)@keyframes創(chuàng)建動(dòng)畫，通過(guò)animation設(shè)置動(dòng)畫，成功完成了這個(gè)復(fù)雜的動(dòng)畫效果。
3.轉(zhuǎn)換
在css3中，我們通過(guò)transform屬性可以設(shè)置元素的轉(zhuǎn)換效果，具體的效果如下：
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>
代碼效果如下：
如上圖所示，本來(lái)div盒子的位置是left:0,top:0;
但是我們通過(guò)transform: translate(300px,300px);將盒子進(jìn)行了偏移，所以，盒子的位置發(fā)生了改變。
B.旋轉(zhuǎn)
<!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>
代碼效果如下：
如上圖所示，本來(lái)div盒子應(yīng)該是四四方方的。
但是，經(jīng)過(guò)我們的代碼transform: rotate(45deg); //deg為單位，表示度數(shù)。
進(jìn)行了45度的旋轉(zhuǎn)之后，呈現(xiàn)出來(lái)的就是一個(gè)菱形的盒子了，旋轉(zhuǎn)的正方向?yàn)轫槙r(shí)針，負(fù)方向?yàn)槟鏁r(shí)針。
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>
代碼效果如下：
如上圖所示，本來(lái)盒子的寬高為200*200,而我們通過(guò)transform: scale(0.5,0.25);進(jìn)行的縮放
scale的第一個(gè)參數(shù)為0.5,表示橫向縮小為0.5倍
scale的第二個(gè)參數(shù)為0.25，表示縱向縮小為0.25倍。
scale的參數(shù)如果為1，則表示不進(jìn)行任何縮放，小于1就是做縮小，而大于1表示做放大。
小結(jié)：transform轉(zhuǎn)換中其實(shí)還包含了skew(傾斜)，matrix(矩陣轉(zhuǎn)換)，相對(duì)來(lái)說(shuō)用到的不是特別多，所以在本文中我們便不再做介紹。
4.flex布局
Flex布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。
Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來(lái)為盒裝模型提供最大的靈活性。任何一個(gè)容器都可以指定為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>
代碼效果如下：
如圖所示，咱們通過(guò)display:flex將.parent元素設(shè)置為了flex盒子，那么子元素將會(huì)按照justify-content設(shè)置的方式進(jìn)行元素的排列，目前看來(lái)，和我們沒(méi)有設(shè)置flex盒子的效果是一致的。
接下來(lái)我們更改一下，將justify-content設(shè)置為flex-end，效果如下圖所示：
所以我們就應(yīng)該發(fā)現(xiàn)，flex-start是讓所有的子元素從父元素的左側(cè)開始排列
而flex-end是讓所有的子元素從元素的右側(cè)開始排列。
我們?cè)賮?lái)更改一下，將justify-content設(shè)置為center，效果如下圖所示：
更厲害了，子元素在父盒子的中央位置排列顯示了。
然后，我們?cè)賹ustify-content設(shè)置為space-around，效果如下圖所示：
它是平均分配的形式為每一個(gè)子元素設(shè)置了間距，但是看起來(lái)有點(diǎn)變扭。
所以我們推薦將justify-content設(shè)置為space-between，效果如下圖：
我們還可以通過(guò)flex-wrap來(lái)設(shè)置子元素是否換行顯示，以及flex-direction設(shè)置子元素排列的順序。
這兩個(gè)屬性可以設(shè)置的值如下：
flex-wrap: nowrap;//不換行，會(huì)自動(dòng)收縮
flex-wrap: warp;//換行，會(huì)自動(dòng)收縮
flex-wrap: warp-reverse;//反轉(zhuǎn)，從默認(rèn)的從上到下排列反轉(zhuǎn)為從下到上。
flex-direction:row; //從左至右一行一行進(jìn)行子元素的排列
flex-direction:column; //從上到下一列一列進(jìn)行子元素的排列
flex-direction:row-reverse; //從右至左一行一行進(jìn)行子元素的排列
flex-direction:column-reverse; //從下到上一列一列進(jìn)行子元素的排列
案例代碼如下：
<!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>
我們?cè)O(shè)置了flex-wrap: nowrap;（不換行，壓縮所有的子元素在一行中顯示），以及flex-direction: row-reverse;（反向排列）
代碼效果如下：
如果設(shè)置為flex-wrap: warp（換行顯示無(wú)法在一行顯示的子元素），則效果如下：
如果將flex-direction: column;,則會(huì)縱向排列元素，效果如下圖：
除了上面的這些給伸縮盒子父元素設(shè)置的樣式之外，我們還可以可以伸縮盒子的子元素設(shè)置flex屬性，用來(lái)設(shè)置平均分配整個(gè)父盒子的空間。
代碼如下：
<!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>
效果如下：
如上圖所示，每個(gè)盒子平均分配了父盒子的空間，原本寬度為20%，現(xiàn)在被拉伸了。
除此之外，咱們還可以使用flex屬性進(jìn)行進(jìn)一步的設(shè)置，代碼如下：
<!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>
效果如下圖：
我們分別給四個(gè)子盒子設(shè)置了flex:1 , flex:2, flex:2 ,flex:1.
這是什么意思呢？
四個(gè)flex加起來(lái)一共是6.那么第一個(gè)盒子就占據(jù)整個(gè)父盒子的1/6寬度。
同理，另外三個(gè)盒子分別占據(jù)2/6,2/6,1/6的寬度，所以就形成了我們現(xiàn)在看到的效果。
原文來(lái)源于：黑馬程序員社區(qū)
學(xué)習(xí)資源：
想學(xué)習(xí)css，可以關(guān)注：黑馬程序員頭條號(hào)，后臺(tái)回復(fù)：css
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
