網頁工程C - 製作漸變顏色動畫效果背景

關於聯絡

CSS (18)animation (1)gradient (1)keyframes (1)動畫效果 (2)藝術效果 (2)

相關內容

製作漸變顏色背景

利用 CSS 中的 linear-gradient、animation 及 keyframes，無需要任何 javascript 的輔助，便可以製作出漸變背景顏色的特別效果：

HTML

<div id="title" class="anim_back">
    TESTING TITLE
</div>

CSS

#title {
    padding: 20px;
    font-size: 3em;
    color:#ffffff;
    text-align:center;
}
 
.anim_back {
    background-image: linear-gradient(45deg, #845ec2, #d65db1, #ff6f91, #ff9671);
    background-size: 500%;
    animation: bg-animation 8s infinite alternate;
}
 
@keyframes bg-animation{
    0% {
        background-position: left;
    }
    100%{
        background-position: right;
    }
}

以自定的漸變顏色（此例子使用 linear-gradient）作為區域的背景（background-image）

當使用漸變色作為背景時，系統會自動將整個顏色段完整顯示出來。加入 background-size: 500% 的作用是令漸變色背景大於所能顯示的範圍，亦即是只能顯示漸變色中的某一部份顏色。

因為漸變顏色背景比顯示範圍大的關係，現在只要設定 background-position 到不同位置，便能做出顯示不同顏色段的效果。

將變更 background-position 的動作設定成 keyframes，由最初（0%）位置最左，到最尾（100%）位置最右，並給此 keyframes 一個名稱（bg-animation）

利用剛建立的 bg-amination 設定 animation，設定由 0% 到 100% 所需的時間（8s），infinite 表示無限循環，alternate 表示當動畫到最尾之後便自動反方向執行，這樣可令漸變效果更平滑。