css 实现线性渐变和径向渐变动画效果，应用场景：报警_animation:gradientbg 90s ease infinite;-CSDN博客

本文链接：https://blog.csdn.net/qq_41580802/article/details/131877203

文章展示了如何使用CSS3的linear-gradient和radial-gradient创建动态的背景效果。线性渐变通过改变角度和颜色stop实现从一个方向到另一个方向的过渡，而径向渐变则从圆心向外产生颜色变化。通过配合使用keyframes动画，可以实现背景颜色的周期性变换，增强视觉体验。

摘要由CSDN通过智能技术生成

知识点：

background 中的两个属性：1、linear-gradient（线性渐变）；2、radial-gradient（径向渐变，也就是从圆心向周围渐变）

效果线性渐变：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.warning {

width: 500px;

height: 500px;

            background: linear-gradient(-45deg, #ff3f1d, #ffbd41, #ff3f1d);

          background-size: 400% 400%;

        -webkit-animation: Gradient 2.5s ease infinite;

        -moz-animation: Gradient 2.5s ease infinite;

        animation: Gradient 2.5s ease infinite;

}



@-webkit-keyframes Gradient {

0% {

background-position: 0% 50%;

}

50% {

background-position: 100% 50%;

}

100% {

background-position: 0% 50%;

}

}

@-moz-keyframes Gradient {

0% {

background-position: 0% 50%;

}

50% {

background-position: 100% 50%;

}

100% {

background-position: 0% 50%;

}

}

@keyframes Gradient {

0% {

background-position: 0% 50%;

}

50% {

background-position: 100% 50%;

}

100% {

background-position: 0% 50%;

}

}

</style>

</head>

<body>

<div class="warning "></div>

</body>

</html>

效果2 径向渐变：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.warning {

width: 500px;

height: 500px;

        -webkit-animation: Gradient 2.5s ease infinite;

        -moz-animation: Gradient 2.5s ease infinite;

        animation: Gradient 2.5s ease infinite;

}



@-webkit-keyframes Gradient {

0% {

opacity: 0.2;

background: radial-gradient(#ff3f1d, #ffbd41);

}

50% {

opacity: 1;

background: radial-gradient(#ff3f1d, #ffbd41);

}

100% {

opacity: 0.2;

background: radial-gradient(#ff3f1d, #ffbd41);

}

}

@-moz-keyframes Gradient {

0% {

opacity: 0.2;

background: radial-gradient(#ff3f1d, #ffbd41);

}

50% {

opacity: 1;

background: radial-gradient(#ff3f1d, #ffbd41);

}

100% {

opacity: 0.2;

background: radial-gradient(#ff3f1d, #ffbd41);

}

}

@keyframes Gradient {

0% {

opacity: 0.2;

background: radial-gradient(#ff3f1d, #ffbd41);

}

50% {

opacity: 1;

background: radial-gradient(#ff3f1d, #ffbd41);

}

100% {

opacity: 0.2;

background: radial-gradient(#ff3f1d, #ffbd41);

}

}

</style>

</head>

<body>

<div class="warning "></div>

</body>

</html>