講解 CSS 過渡和動畫 transition/animation (很全面 )

講解CSS過渡和動畫 transition/animation：全方位深入實踐指南

**引言：賦予網頁動態生命力**

CSS過渡（Transition）與動畫（Animation）是現代Web前端開發中不可或缺的設計元素，它們使靜態網頁變得生動活潑，極大地提升了用戶體驗。本文旨在以全面且易于理解的方式講解CSS過渡與動畫的工作原理、應用場景及其具體實現方法，輔以實例代碼，幫助您更好地理解和掌握這一關鍵技術。

---

### **一、CSS過渡基礎概念**

**標題：走進CSS Transition的世界**

**1. 過渡是什么？**

CSS過渡是一種視覺效果，它能夠在CSS屬性值發生變化時平滑地過渡。例如，當鼠標懸停在一個元素上時，其背景顏色可以從白色逐漸過渡到黑色。

**2. 如何定義過渡？**

過渡由三個關鍵部分組成：**觸發器**（何時啟動過渡）、**持續時間**（過渡多久完成）以及**執行方式**（如何變化）。

```css

/* 基礎過渡設置 */

.example {

transition: property duration timing-function delay;

}

/* 示例 */

.box {

width: 100px;

height: 100px;

background-color: red;

transition: background-color 0.5s ease-in-out;

}

```

在此示例中，`.box`元素的背景色會在屬性值改變時，在0.5秒內平滑過渡。

---

### **二、過渡觸發方式**

**標題：觸發動畫的關鍵時刻**

過渡通常在CSS屬性值發生改變時自動觸發，常見的觸發方式有：

- **偽類觸發**（`:hover`, `:focus`, `:active`等）

- **JavaScript操作觸發**（通過更改DOM元素樣式）

```html

<!DOCTYPE html>

<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>

</body>

</html>

```

在這個例子中，當鼠標懸停在`.box`元素上時，背景顏色會通過過渡效果變藍。

---

### **三、CSS動畫進階詳解**

**標題：構建復雜的動畫效果**

CSS動畫比過渡更為靈活，允許開發者定義一系列關鍵幀（@keyframes），并在指定時間段內逐步變換樣式。

**1. 創建關鍵幀規則**

```css

@keyframes fadeInOut {

0% { opacity: 0; }

50% { opacity: 1; }

100% { opacity: 0; }

}

```

上述代碼定義了一個名為`fadeInOut`的動畫，元素將在動畫期間經歷透明度從0到1再到0的變化。

**2. 應用動畫**

```css

.box {

animation-name: fadeInOut;

animation-duration: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

```

通過`animation-*`系列屬性，我們將`fadeInOut`動畫應用于`.box`元素，使其無限循環交替播放，每次持續2秒。

---

### **四、動畫高級特性**

**標題：探索動畫的更多可能性**

- **動畫填充模式**（animation-fill-mode）控制動畫結束后元素的樣式狀態。

- **動畫延時**（animation-delay）決定動畫何時開始。

- **動畫播放次數**（animation-iteration-count）可設置動畫循環次數，甚至使用`infinite`無限循環。

- **動畫方向**（animation-direction）影響動畫是否逆序播放。

---

### **五、綜合案例分析**

**標題：實際項目中的CSS過渡與動畫運用**

此處可以結合實際項目需求，給出一個或多個包含復雜過渡和動畫交互的HTML+CSS示例，比如響應式導航菜單的展開收起動畫、輪播圖切換過渡效果等，以增強文章的實用性。

---

**結語：**

熟練掌握CSS過渡和動畫，能讓您的網頁設計更具表現力和吸引力。無論是微小的UI細節還是復雜的交互場景，善用過渡和動畫都能有效提升用戶體驗。記住，適時適度的動態效果才是錦上添花，過度則可能適得其反。希望通過這篇文章，您能夠洞悉CSS過渡與動畫的奧秘，并在實踐中游刃有余地運用這些強大的工具。

您2019豬事順利，心想事成。

前言

前面兩篇文章都有提到過box-shadow，里面也有很多的基礎知識，有看過的小伙伴應該都有或多或少的收獲吧，今天我們再從基礎入手，希望能讓大家更熟悉它。

沒有看過之前文章的小伙伴請點擊：

CSS3 box-shadow實現背景動畫

CSS3動畫解析抖音 LOGO制作

下面我們從最基礎的開始演示。

單側投影

關鍵點: 1、外 box-shadow 前四個參數：x 偏移值、y 偏移值、模糊半徑、擴張半徑。 2、單側投影的核心是第四個參數：擴張半徑。這個參數會根據你指定的值去擴大或縮小投影尺寸，如果我們用一個負的擴張半徑，而他的值剛好等于模糊半徑，那么投影的尺寸就會與投影所屬的元素尺寸完全一致，除非使用偏移量來移動他，否則我們將看不到任何投影。

<style>
.left {
 box-shadow: -8px 0 5px -5px #333;
}

.right {
 box-shadow: 8px 0 5px -5px #333;
}

.top {
 box-shadow: 0 -8px 5px -5px #333;
}

.bottom {
 box-shadow: 0 8px 5px -5px #333;
}
</style>
<div class='left'>左</div>
<div class='right'>右</div>
<div class='top'>上</div>
<div class='bottom'>下</div>

立體文字陰影

知識點：

1、立體文字陰影的關鍵點在于多層 text-shadow 的疊加

2、合理運用了 SASS 函數來自動計算多層 text-shadow 的 CSS 代碼

3、運用了 Sass 的顏色函數，漸進實現層級陰影顏色 - fade-out: 改變顏色的透明度，讓顏色更加透明 - desaturate: 改變顏色的飽和度值，讓顏色更少的飽和

4、HSL(顏色值)

H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
S：Saturation(飽和度)。取值為：0.0% - 100.0%
L：Lightness(亮度)。取值為：0.0% - 100.0%

<style>
@function blessing($color) {
 $val: 0px 0px $color;
 @for $i from 1 through 50 {
 $color: fade-out(desaturate($color, 1%), .02);
 $val: #{$val}, -#{$i}px #{$i}px #{$color};
 }
 @return $val;
}

div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: blessing(hsl(0, 100%, 50%));
 color: hsl(14, 100%, 60%);
}
</style>
<div>福</div>

編譯后的css(推薦scss在線編譯為css工具) https://www.sassmeister.com/

...
div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: 0px 0px #992400, 
 1px 1px rgba(152, 36, 1, 0.98), 
 2px 2px rgba(151, 37, 2, 0.96), 
 3px 3px rgba(151, 37, 2, 0.94), 
 ...
 ...
 ... 
 49px 49px rgba(116, 56, 37, 0.02), 
 50px 50px rgba(115, 56, 38, 0);
 color: #ff6333;
}

從淺到深的學習 CSS3陰影(box-shadow)

線性漸變模擬長陰影

知識點

1、借用了元素的兩個偽元素

2、通過漸變色填充兩個偽元素，再通過位移、變換放置在合適的位置

<style>
div {
 position: relative;
 width: 30vmin;
 height: 30vmin;
 line-height: 30vh;
 text-align: center;
 font-size: 30px;
 background: #fff;
 margin: 30vmin auto;
}

div::before,
div::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: -1;
}

div::before {
 content: ':before';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 50%;
 transform: translate(100%, 0) skewY(45deg) scaleX(.6);
 background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);
}

div::after {
 content: ':after';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 0;
 transform: translate(0%, 100%) skewX(45deg) scaleY(.6);
 background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);
}
</style>
<div>Web秀</div>

從淺到深的學習 CSS3陰影(box-shadow)

漸變實現內切角

知識點

1、陰影實現的關鍵點在于使用偽元素絕對定位在容器的一角，元素本身透明，陰影擴散開形成內切圓角效果

2、陰影實現缺點，單個標簽最多只能是2個內切圓角

3、徑向漸變實現內切圓角可以是4邊

<style>
div {
 position: relative;
 width: 20vw;
 height: 8vw;
 margin: 1vw auto;
 border-radius: 1vmin;
 overflow: hidden;
 line-height: 8vw;
 color: #fff;
 text-align: center;
}

.shadow::before {
 position: absolute;
 content: "";
 top: -2vw;
 left: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.shadow::after {
 position: absolute;
 content: "";
 bottom: -2vw;
 right: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.linear {
 background-size: 70% 70%;
 background-image: 
 radial-gradient(
 circle at 100% 100%, 
 transparent 1vw, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 100% 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 100%, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw);
 background-repeat: no-repeat;
 background-position: 
 right bottom, 
 left top, 
 right top, 
 left bottom;
}
</style>
<div class="shadow">陰影實現缺點最多是2邊</div>
<div class="linear">徑向漸變內切圓角4邊</div>

從淺到深的學習 CSS3陰影(box-shadow)

圓環進度條動畫

知識點 ：圓環進度條的移動本質上是陰影順序延時移動的結果。

<style>
body {
 background: #000;
}

.container {
 position: relative;
 overflow: hidden;
 width: 124px;
 height: 124px;
 overflow: hidden;
 margin: 100px auto;
 border-radius: 50%;
}

.shadow {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 120px;
 height: 120px;
 line-height: 120px;
 border-radius: 50%;
 color: #fff;
 font-size: 20px;
 cursor: pointer;
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63;
 text-align: center;
}
.shadow:hover {
 animation: border 0.5s ease forwards;
}

@keyframes border {
 0% {
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px transparent;
 }
 25% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 50% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 75% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 100% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 120px 40px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
}
</style>
<div class="container">
 <div class="shadow">web 秀</div></div>
</div>

從淺到深的學習 CSS3陰影(box-shadow)

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址和源文件下載請點擊下方“了解更多”

、涉及的函數

隱藏：

初始化：class='hidden';

過程中：hide();fadeOut;

顯示：show();fadeIn();

二、登錄框界面設計

</div>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</form>

</div>

<div id='background' class='hidden'></div>

三、打開登錄彈出框

$( '.login' ).click( function () {

var obj = $( '#login' );

dialog( obj );

}

在線咨詢

上一篇：賣家注意：商品描述頁面將不能使用HTML標記
下一篇：python 模塊BeautifulSoup 從HTML或XML文件中提取數據

您的項目需求

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

整合營銷服務商

講解 CSS 過渡和動畫 transition/animation (很全面 )

前言

單側投影

立體文字陰影

線性漸變模擬長陰影

漸變實現內切角

圓環進度條動畫

公告

、涉及的函數

二、登錄框界面設計

三、打開登錄彈出框

您的項目需求

、涉及的函數

二、登錄框界面設計