CSS圖片漸變代碼大全 在網頁設計中，漸變效果是非常重要和常見的一個元素。在CSS中，使用漸變可以實現圖片從一種顏色變成另一種顏色，或者從一種風格漸變到另一種風格。本文將提供一些常用的CSS圖片漸變代碼，希望對你有所幫助。 線性漸變 線性漸變是最常用的一種漸變，它可以讓顏色按照一定的角度和方向漸變。 以下是一個從左到右的漸變效果：

p {
background-image: linear-gradient(to right, #FF6B6B, #FFE66D);
}

以下是一個從上到下的漸變效果：

p {
background-image: linear-gradient(to bottom, #FF6B6B, #FFE66D);
}

以下是一個角度漸變效果，從左上角到右下角：

p {
background-image: linear-gradient(to bottom right, #FF6B6B, #FFE66D);
}

徑向漸變 徑向漸變是另一種常用的漸變方式，它可以讓顏色從中心點向外擴散漸變。 以下是一個從中心點向外的漸變效果：

p {
background-image: radial-gradient(circle, #FF6B6B, #FFE66D);
}

以下是一個從左上角向右下角的漸變效果：

p {
background-image: radial-gradient(ellipse at top left, #FF6B6B, #FFE66D);
}

以下是一個從指定點開始的漸變效果：

p {
background-image: radial-gradient(100px 100px, circle, #FF6B6B, #FFE66D);
}

漸變動畫 除了靜態的漸變效果，我們還可以為漸變效果添加動畫，增加頁面的交互感。 以下是一個基本的漸變動畫效果，讓圖片的顏色從左到右慢慢漸變：

p {
background: linear-gradient(to right, #FF6B6B, #FFE66D);
background-size: 200% auto;
animation: gradient 2s ease-in-out infinite;
}
@keyframes gradient {
0% {
background-position: 0% center;
}
100% {
background-position: 100% center;
}
}

結論 本文提供了一些常用的CSS圖片漸變代碼，希望能夠幫助你在網頁設計中更好的應用漸變效果。如果你還有其他的漸變效果需要請自行查找。