、Fade In

// css
.show {
  opacity: 1;
}
.hide {
  opacity: 0;
  transition: opacity 400ms;
}

// js
el.classList.replace('show', 'hide');

2、Fade Out

// css
.show {
  opacity: 1;
  transition: opacity 400ms;
}
.hide {
  opacity: 0;
}

// js
el.classList.replace('hide', 'show');

3、完整例子

秘CSS3：打造視覺盛宴——深度解析漸變、陰影與遮罩技術

隨著Web技術的不斷演進，CSS3以其強大的視覺表現力，賦予網頁設計無限可能。本文將深入剖析CSS3中的三大視覺魔法工具——漸變、陰影與遮罩技術，通過詳盡的理論講解和豐富的實例演示，助您掌握這些技巧，打造出令人眼前一亮的網頁視覺盛宴。

一、魅力漸變：色彩的藝術流動

1. 線性漸變：平滑過渡，簡約而不簡單

css
background: linear-gradient(to right, #ff6b6b, #ff9595);

上述代碼創建了一個從左至右，由#ff6b6b漸變到#ff9595的線性漸變背景。您可以調整方向（如`to bottom`、`45deg`等）、添加更多顏色停止點來豐富漸變效果。

2. 徑向漸變：聚焦視覺中心，營造立體感

css
background: radial-gradient(circle at center, #f7f7f7, #dcdcdc);

此例中，我們創建了一個以元素中心為圓心，從#f7f7f7漸變到#dcdcdc的圓形徑向漸變背景。通過調整形狀（如`ellipse`）、大小（如`closest-side`）和位置（如`top left`），可以靈活定制徑向漸變樣式。

二、立體陰影：賦予元素生命與空間感

1. 盒子陰影（Box Shadow）：輕松實現三維效果

css
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);

上述代碼為元素添加了一個向右下偏移2px、模糊半徑為8px、顏色為rgba(0, 0, 0, 0.3)的陰影。理解盒陰影的基本參數（水平偏移、垂直偏移、模糊半徑、擴散半徑、顏色）并靈活運用，即可創造出豐富的陰影效果。

2. 文本陰影（Text Shadow）：讓文字躍然紙上

css
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.?), -1px -1px 2px rgba(255, 255, 255, 0.5);

此處為文本設置了兩個陰影：一個向右下偏移、顏色較深的陰影，以及一個向左上偏移、顏色較淺的陰影，形成微妙的浮雕效果。通過疊加多個陰影、調整參數，您可以創作出各種獨特的文本樣式。

三、神奇遮罩：掌控元素可見度與透明度

1. CSS Mask：精細裁剪，展現獨特視界

css
mask-image: linear-gradient(to right, transparent 0%, black 50%, transparent 100%);

該代碼為元素應用了一個從左至右的線性漸變遮罩，使得元素左側和右側各有一半區域透明。您還可以使用`mask-mode`、`mask-repeat`、`mask-position`等屬性進一步調整遮罩行為。

2. CSS Clip Path：創意裁剪，打破常規布局

css
clip-path: polygon(0 0, 100% 0, .png);

上述代碼使用多邊形裁剪路徑，將元素頂部裁剪成尖角形狀。您還可以使用橢圓、圓形、內切/外切矩形等多種路徑類型，甚至借助SVG路徑實現更為復雜的裁剪效果。

四、實戰案例：融合三大技術，打造視覺盛宴

案例一：動態漸變按鈕

css
/* 定義CSS變量 */
:root {
  --start-color: #ff6b6b;
  --end-color: #ff9595;
}

.button {
  background: linear-gradient(to right, var(--start-color), var(--end-color));
  transition: background 0.3s ease-in-out;
}

.button:hover,
.button:focus {
  --start-color: #ff9595;
  --end-color: #ff6b6b;
}

利用CSS變量、偽類和動畫，創建一個點擊時背景漸變顏色動態變化的按鈕：

案例二：懸浮卡片與陰影交互

css
.card {
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.card:hover {
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.5);
}

結合盒子陰影與:hover偽類，實現鼠標懸停時卡片陰影增強的交互效果：

案例三：遮罩疊加文字特效

css
.image-overlay {
  background-image: url('image.jpg'), linear-gradient(to bottom, transparent, black);
  background-blend-mode: multiply;
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

利用遮罩與多重背景，創造出文字在圖片上淡入淡出的特效：

結語

CSS3的漸變、陰影與遮罩技術，如同網頁設計的調色板、光影魔術師和剪刀手，賦予網頁視覺表現無盡的可能性。通過深入理解并熟練運用這些技術，您將能打造出既美觀又富有創意的網頁界面，為用戶帶來極致的視覺體驗。持續探索、實踐與創新，您的每一個作品都將成為Web世界中的一道獨特風景。

6、如何使用 CSS 創建平滑的滾動動畫？

您可以通過將 CSS 動畫與滾動行為屬性相結合，使用 CSS 創建平滑的滾動動畫。將滾動行為設置為在容器元素上平滑，然后將動畫應用到滾動到頁面內特定部分的錨鏈接。

這是一個例子：

.container {  scroll-behavior: smooth;}
a[href^="#"] {  animation: scrollAnimation 1s ease-in-out;}@keyframes scrollAnimation {  0% {    transform: translateY(0);  }  100% {    transform: translateY(-100px);  }}

57、如何使用 CSS 創建加載旋轉動畫？

您可以通過定義旋轉關鍵幀動畫，使用 CSS 創建加載旋轉器動畫。通過旋轉偽元素或圖像，可以實現旋轉的效果。這是一個例子：

.spinner {  width: 40px;  height: 40px;  border: 4px solid #f3f3f3;  border-top: 4px solid #3498db;  border-radius: 50%;  animation: spin 2s linear infinite;}
@keyframes spin {  0% {    transform: rotate(0deg);  }  100% {    transform: rotate(360deg);  }}

58、如何使用 CSS 動畫在懸停時創建淡入淡出效果？

您可以使用 CSS 動畫和 @keyframes 規則在懸停時創建淡入淡出效果。通過將不透明度屬性設置為從 0 到 1 的動畫，您可以實現平滑的淡入效果。這是一個例子：

.element {  opacity: 1;  transition: opacity 0.3s ease;}
.element:hover {  animation: fadeEffect 0.3s;}@keyframes fadeEffect {  0% {    opacity: 1;  }  100% {    opacity: 0;  }}

59、如何控制CSS動畫的方向和迭代？

CSS 動畫可以使用animation-direction 和animation-iteration-count 屬性來控制。animation-direction 屬性定義動畫是否應該向前、向后播放，或者在向前和向后之間交替播放。Animation-iteration-count 屬性指定動畫應重復的次數。這是一個例子：

.element {  animation: slideIn 1s forwards;  animation-direction: reverse;  animation-iteration-count: infinite;}

60、什么是CSS預處理器，它們為什么有用？

CSS 預處理器是通過引入變量、嵌套、混合和函數等功能來擴展 CSS 功能的工具。它們允許您以更有組織、更高效的方式編寫 CSS 代碼。Sass、Less 和 Stylus 等預處理器有助于簡化樣式工作流程、提高代碼可重用性并增強可維護性。