Chuyển tiếp CSS

BG chuyển dần

Hiệu ứng chuyển đổi CSS cho phép bạn hiển thị sự chuyển đổi mượt mà giữa hai hoặc nhiều màu sắc được chỉ định.

CSS định nghĩa hai loại hiệu ứng chuyển đổi:

  • Line gradient（từ dưới lên/ từ trên xuống/ từ trái sang phải/ từ phải sang trái/ chéo）
  • Line gradient theo hướng（do tâm của nó xác định）

Line gradient CSS

Để tạo hiệu ứng line gradient, bạn phải định nghĩa ít nhất hai điểm màu. Điểm màu là màu mà bạn muốn hiển thị chuyển đổi mượt mà. Bạn cũng có thể thiết lập điểm bắt đầu và hướng (hoặc góc) cũng như hiệu ứng chuyển đổi.

cú pháp

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Line gradient - từ trên xuống (mặc định)

Dưới đây là ví dụ minh họa về hiệu ứng chuyển đổi màu line gradient bắt đầu từ trên cùng. Nó bắt đầu từ màu đỏ và chuyển dần sang màu vàng:

从上到下（默认）

Example

#grad {
  Từ trên xuống (mặc định)
}

Try It Yourself

background-image: linear-gradient(red, yellow);

BG chuyển dần - Từ trái qua phải

Dưới đây là ví dụ về hiệu ứng chuyển dần tuyến tính bắt đầu từ trái. Nó bắt đầu từ đỏ, chuyển đổi sang vàng:

Example

#grad {
  Từ trái qua phải
}

Try It Yourself

BG chuyển dần - Chéo

Bạn có thể thực hiện hiệu ứng chuyển dần chéo bằng cách chỉ định vị trí bắt đầu ngang và dọc.

Dưới đây là ví dụ về hiệu ứng chuyển dần tuyến tính bắt đầu từ góc trên trái (tới góc dưới phải). Nó bắt đầu từ đỏ, chuyển đổi sang vàng:

Từ trên trái xuống dưới phải

Example

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Try It Yourself

Sử dụng góc

Nếu bạn muốn kiểm soát góc chuyển dần nhiều hơn, bạn có thể định nghĩa một góc để thay thế hướng định trước (tới dưới, tới trên, tới phải, tới trái, tới dưới phải, v.v.). Giá trị 0deg bằng tới trên (to top). Giá trị 90deg bằng tới phải (to right). Giá trị 180deg bằng tới dưới (to bottom).

180deg

cú pháp

background-image: linear-gradient(góc, color-stop1, color-stop2);

Góc này xác định góc giữa đường thẳng đứng và đường chuyển dần.

Dưới đây là ví dụ về cách sử dụng góc trong hiệu ứng chuyển dần tuyến tính:

Example

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

Try It Yourself

Sử dụng nhiều chỉ số màu

Dưới đây là ví dụ về hiệu ứng chuyển dần tuyến tính với nhiều chỉ số màu (từ trên xuống):

Example

#grad {
  background-image: linear-gradient(red, yellow, green);
}

Try It Yourself

Dưới đây là ví dụ về cách sử dụng màu cầu vồng và văn bản để tạo hiệu ứng chuyển dần tuyến tính (từ trái qua phải):

BG chuyển dần

Example

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
}

Try It Yourself

Sử dụng độ trong suốt

CSS còn hỗ trợ độ trong suốt cho hiệu ứng chuyển dần, cũng có thể được sử dụng để tạo hiệu ứng chuyển dần.

Nếu cần thêm độ trong suốt, chúng ta sử dụng hàm rgba() để định nghĩa chỉ số màu. Giá trị cuối cùng của hàm rgba() có thể là giá trị từ 0 đến 1, nó định nghĩa độ trong suốt của màu: 0 biểu thị trong hoàn toàn, 1 biểu thị màu hoàn toàn (không trong).

The following example shows a linear gradient starting from the left. It starts completely transparent and then transitions to full red:

Example

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Try It Yourself

Repeated Linear Gradient

repeating-linear-gradient() Function for Repeating Linear Gradient:

Example

Repeated Linear Gradient:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Try It Yourself