当前位置: 首页> 教育> 高考 > 5、css3 自动动画渐变背景

5、css3 自动动画渐变背景

时间:2025/7/17 13:23:02来源:https://blog.csdn.net/cyz141001/article/details/139352277 浏览次数:0次

效果例图:(因gif图片太大,而csdn只能上传小于5m图片,所以无法上传)

1、首先上传html代码:

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="./3.css"><title>Document</title>
</head><body><div class ="text">CSS 渐变酷炫背景动画效果</div>
</body>
</html>

 2、上传核心CSS3代码:

body{height: 100vh;width: 100vw;margin: 0;padding: 0;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;background-size: 400%;background-image: linear-gradient(90deg,#2c3e50,#27ae60,#b9aa29,#2980b9,#e74c3c,#8e44ad);animation: bganimation 15s infinite;
}
.text{color: white;text-align: center;text-transform: uppercase;padding: 30vh;font-size: 22px;
}
@keyframes bganimation{0%{background-position: 0% 50%;}50%{background-position: 100% 50%;}100%{background-position: 0% 50%;}
}

关键字:5、css3 自动动画渐变背景

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: