卡卡網(wǎng)

本文介紹的CSS動(dòng)畫背景是——對(duì)角線顏色漸變。

demodownload

實(shí)例簡(jiǎn)介

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

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、漸變顏色設(shè)置

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

2、漸變速度設(shè)置

animation: gradient 15s ease infinite;

3、漸變方向設(shè)置

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

總結(jié)

本動(dòng)畫背景-對(duì)角線顏色漸變的實(shí)例，純CSS實(shí)現(xiàn)，無(wú)需用到JS，代碼簡(jiǎn)單，使用方便。

您可能對(duì)以下文章也感興趣

• 純CSS實(shí)現(xiàn)的星光動(dòng)畫背景

標(biāo)簽: 動(dòng)畫背景