本文介绍的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，代码简单，使用方便。

您可能对以下文章也感兴趣

  • 纯CSS实现的星光动画背景
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。