runsly html+css教程 2022-04-01

CSS动画背景-对角线颜色渐变

本文介绍的CSS动画背景是——对角线颜色渐变。

demodownload

实例简介

使用零 JS 创建此 CSS 动画背景示例。它创造了四种颜色的光芒，从一个角落到另一个对角线逐渐过渡。你可以更改颜色以及渐变的速度和方向。

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，代码简单，使用方便。