卡卡網

本文介紹的CSS動畫背景是——對角線顏色漸變。

demodownload

實例簡介

使用零 JS 創(chuàng)建此 CSS 動畫背景示例。它創(chuàng)造了四種顏色的光芒，從一個角落到另一個對角線逐漸過渡。你可以更改顏色以及漸變的速度和方向。

CSS代碼

html, body {
  width: 100%;
  height:100%;
}

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

代碼分析

1、漸變顏色設置

background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);

2、漸變速度設置

animation: gradient 15s ease infinite;

3、漸變方向設置

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

總結

本動畫背景-對角線顏色漸變的實例，純CSS實現，無需用到JS，代碼簡單，使用方便。

您可能對以下文章也感興趣

• 純CSS實現的星光動畫背景

標簽: 動畫背景