言

在現代Web開發中，CSS3的@keyframes規則為網頁動態效果的創建提供了強大的原生支持。通過定義關鍵幀動畫，我們可以實現從一個樣式狀態平滑過渡到另一個樣式狀態的過程，讓網頁元素動起來，提升用戶體驗和視覺效果。本文將詳細介紹@keyframes的工作原理、使用方法以及示例應用。

一、什么是@keyframes？

@keyframes是CSS3中的一個重要特性，用于創建動畫。它允許開發者定義一組或多組樣式變化過程（關鍵幀），瀏覽器會自動計算中間幀，從而生成流暢的動畫效果。每個關鍵幀都代表了動畫過程中的某一特定時間點的樣式狀態。

二、@keyframes語法結構

@keyframes 動畫名稱 {
  0% { /* 初始狀態樣式 */ }
  50% { /* 中間狀態樣式 */ }
  100% { /* 結束狀態樣式 */ }
}

/* 或者多個關鍵幀 */
@keyframes 動畫名稱 {
  0% { ... }
  25% { ... }
  50% { ... }
  75% { ... }
  100% { ... }
}

• 動畫名稱：自定義的關鍵幀動畫的名字，用于在需要動畫的元素上引用該動畫。
• %：表示動畫進度，0%為動畫開始，100%為動畫結束。在這兩個值之間可以定義任意數量的關鍵幀，瀏覽器會根據這些關鍵幀的樣式逐漸過渡。

三、應用動畫至元素

創建完關鍵幀動畫后，要使其生效，需要將其應用于具體的HTML元素，并指定動畫的時長和其他參數：

選擇器 {
  animation-name: 動畫名稱;
  animation-duration: 動畫時長;
  /* 其他可選屬性如：
   * animation-timing-function, animation-delay, animation-iteration-count,
   * animation-direction, animation-fill-mode, animation-play-state等
   */
}

例如：

/* 定義一個簡單的旋轉動畫 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  
  /* 應用動畫 */
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite; /* 無限次循環播放 */
}

在這個例子中，.box元素將按照spin動畫定義的內容，每2秒完成一次從0度到360度的旋轉，并且會無限循環。

四、高級用法

除了基礎的樣式變換外，@keyframes還可以結合其他CSS屬性實現更復雜的動畫效果，如顏色漸變、尺寸變化、位置移動等。同時，可以通過調整關鍵幀的分布和動畫曲線來控制動畫的節奏和流暢度。

示例： 下面是一個更為豐富的動畫示例，展示了元素從左向右移動并改變透明度的過程：

@keyframes slideFade {
  0% {
    left: 0;
    opacity: 0;
  }
  50% {
    left: calc(100% - 100px);
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.animate-element {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: blue;

  animation-name: slideFade;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

綜上所述，CSS3中的@keyframes規則為我們構建豐富網頁動畫提供了強大而靈活的方式。熟練掌握這一特性，可以幫助我們創造更加生動有趣的Web體驗。

文介紹如何通過主 CSS 設置，實現圖像的基本特效，圖像懸停hover和圖像動畫。

Creating Basic Image Effects With CSS使用 CSS 創建基本圖像效果

.

Rounded Corners 圓角效果

通過設置 border-radius： px, em, 或 % 方式.

并可設置 top-left, top-right, bottom-right, and bottom-left. 單獨設置

/* slighty_rounded */
img {
  border-radius: 15px;
}

/* ellipse from rectangle or circle from square*/
img {
  border-radius: 50%;
}

圖像縮圖效果

通過工作width 自動生成縮圖效果

img {
  border: 2px solid #ddd;
  border-radius: 3px;
  padding: 5px;
  width: 350px;
}

Full-Page Backgrounds 全頁背景

整頁背景是修飾網頁的絕佳選擇，但一定要選擇不會壓倒性的圖像。這些背景特別適用于高分辨率圖像，您希望以足夠大的尺寸顯示，而無需觀眾單獨打開它們。

選項參數:

• auto: 設定原始大小。.
• length: 圖像長度.
• percentage:圖像長度、寬度的百分比
• cover: 調整圖像大小以覆蓋視口，有時需要拉伸或裁剪。.
• contain: 將圖像大小調整為無需裁剪即可適應視口的最大大小。

background-size:：通常與background-position: center; 和background-repeat: no-repeat;;，等結合使用。

如，圖像居中，全屏顯示:

body {
  background: url(example.jpg);
  background-position: center;
  background-size: cover;
}

響應式圖像效果

響應式圖像會實時調整自身大小以適應用戶的瀏覽器大小，通過確保圖像不會在較小的屏幕上壓倒您的網站，并且在較大的屏幕上顯示較大的圖像來保護您的頁面設計。

如下面的示例以視口寬度的 70% 顯示圖像：

img {
  max-width: 70vw;
  height: auto;
}

Image Transformations 圖像變換

使用 transform 屬性，可以將二維 （2D） 或三維 （3D） 效果應用于圖像。變換提供了用于縮放、旋轉、傾斜和更改圖像透視的選項。當與 JavaScript 或動畫模塊結合使用時，此屬性可以向圖像添加活動旋轉或移動。

transform 屬性相當新，舊版瀏覽器不完全支持。若要確保轉換在那里工作，請在屬性前面加上 -webkit-, -moz- 和 -ms-，如下例所示，該示例顯示了旋轉和傾斜圖像的轉換。

.

img {
-webkit-transform: rotate(20deg) skewY(20deg); /Chrome, Safari, Opera/
-moz-transform: rotate(20deg) skewY(20deg); /Firefox/
-ms-transform: rotate(20deg) skewY(20deg); / Internet Explorer /
}

懸停效果

如懸停 放大

<img class=’hover_effect’ src=’example.jpg’/>

.hover_effect {
  height:25%;
  width: auto; 
}
 
.hover_effect:hover {
  height: 100%;
  width: auto;
}

懸停透明度變化:

img {
  width:1900px;
  height:1900px;
  opacity: 1;
}

img:hover {
  opacity: 0.2;
}

動畫效果

動畫為圖像增添了流暢性，可以使它們具有交互性，同時利用上述效果以及其他效果。您可以通過以下兩種方式之一設置帶有動畫的圖像樣式，如下所述。

圖像切換效果

應用鼠標經過圖像效果的一種方法是，當用戶將鼠標懸停在圖像上時，它們似乎在圖像之間淡入淡出。您可以通過將一個圖像堆疊在另一個圖像之上并更改頂部圖像的不透明度來實現此目的。下面的代碼創建了一個淡出和淡入效果，當光標移到圖像上時開始，并在光標移開時立即反轉。頂部確保效果適用于較舊的Chrome和Firefox瀏覽器。

<div id="fade_out">
  <img class="bottom" src="/images/image1.jpg" />
  <img class="top" src="/images/image2.jpg" />
</div>

#fade_out {
  position:relative;
  height:100%;
  width:auto;
  margin:0 auto;
}

#fade_out img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  transition: opacity 2s linear;
}

#fade_out img.top:hover {
  opacity:0;
}

圖像定時切換

您可以創建的另一個動畫是使用關鍵幀，這是一個 CSS 模塊，通過定義圖像狀態及其行為配置來實現該創建。

下面的代碼創建一個在兩個選定圖像之間交換的動畫。頂部定義關鍵幀的動畫模式。

<div id="fading">
<img class="bottom" src="banner55.jpg" />
<img class="top" src="banner02.jpg" />
</div>

  @keyframes FadeInOut {
  0% {opacity:1;}
  25% {opacity:.75;}
  50% {opacity:.5;}
  100% {opacity:0;}
}

接下來，將該模式應用于圖像，定義過渡效果、重復動畫的次數、動畫的持續時間等。下面的代碼導致圖像在 10 秒循環中淡入淡出：

#fading img {
position:absolute;
left:0;
}

For Chrome, Mozilla, or Safari:

#fading img.top {
-webkit-animation-name: FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;
}

For Internet Explorer:

#fading img.top {
animation-name: FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

Application of CSS Image Filters 圖像濾鏡

在 CSS 中應用過濾器的最簡單方法是使用它們的函數。您需要做的就是將所需的過濾器添加為屬性及其在 CSS 文件中的值。語法如下：

filtered_elem {
filter: <filter-function>(value | none)
}

See this example with real values:

blurred_sepia_image {
	filter: blur(3px) sepia(50%);
}

Functions of CSS Image Filters 圖像濾鏡函數

圖像旋轉效果

Animations 動畫方式旋轉

若要對旋轉進行動畫處理，請應用 CSS 過渡屬性以指定轉換的其他屬性以及轉換時間。例如，以下代碼導致旋轉在半秒內發生，啟動速度較慢。

.rotate {
	transition: transform 0.5s ease-in;
}

Rotation point 旋轉點

默認情況下，圖像圍繞其中心點旋轉。要使圖像圍繞另一個點旋轉，請使用 CSS 中的轉換原點屬性指定該點。

如果手動定義，中心點為 50% 50%。您可以更改 2D 圖像的 x 和 y 值以及 3D 圖像的 z 值。例如：

旋轉原點設置在右上角：

.rotate {
	transform-origin: 100% 0%;
}

旋轉原點設置在左上角：

.rotate {
	transform-origin: 0% 0%;
}

For more cool tri