这是我参与「掘金日新计划 · 4 月更文挑战」的第24天，点击查看活动详情。 我正在参加 码上掘金体验活动，详情：show出你的创意代码块 一起养成写作习惯！
踔厉奋发，笃行不怠，勇毅前行追梦赤子心。
效果图
用到的技术
html:♥（一个字符）
css：全局选择器，flex布局，水平|垂直居中效果，linear-gradient线性渐变，animation动画，@keyframes创建了动画
代码展示
html
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/aa.css"/>
</head>
<body>
❤
</body>
</html>
css
*{
padding: 0;
margin: 0;
}
body{
/* flex布局 */
display: flex;
/* 水平垂直居中效果 */
justify-content: center;
align-items: center;
/* 选取了我感觉比较好看的三个颜色 */
background-image: linear-gradient(250deg,#C6DFC8,#5DB195,#54B5D9,#C6DFC8);
/* 动画 名字 时间 线性循环 */
animation: bgColor 5s linear infinite;
background-size: 500%;
}
@keyframes bgColor{
0%{
background-position: 0% 50% ;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 100% 50%;
}
}
整体思路
首先在网页上写一些内容，比如提示以下这个网页的内容，其次画出我们想要的效果。在这里，我们首先去做了margin和padding的效果，目的是清除浏览器原先的设置。之后，选取了我们想进行渐变的颜色。
【这里推荐一个网址mycolor.space/?hex=%23845… 这里可以选择已经搭配好的颜色】 最后要对这些颜色进行动画的设置，比如想要的渐变的效果。整合起来就是我们最后的成果啦~
后续延申
可以把渐变的背景放在一个局部，比如一个小彩虹，让他可以进行动态的闪烁；或者类似steam桌面，将局部的内容进行波动，再将此部分和一个动态的图片相结合，喜闻乐见的背景就出现啦~
