本文主要是介绍css动态彩虹背景,前端每日实战：59# 视频演示如何用纯 CSS 创作彩虹背景文字，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。
可交互视频
此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
每日前端实战系列的全部源代码请从 github 下载：
代码解读
定义 dom，容器中有一段文本：
thanks
居中显示：
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
定义文字样式：
p {
font-size: 20vw;
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-weight: bold;
}
设置彩虹背景：
p {
background-image: linear-gradient(
to right,
orangered,
orange,
gold,
lightgreen,
cyan,
dodgerblue,
mediumpurple,
hotpink,
orangered);
background-size: 110vw;
}
定义动画效果：
p {
animation: sliding 30s linear infinite;
}
@keyframes sliding {
to {
background-position: -2000vw;
}
}
最后，把彩虹背景移到文字下面：
p {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
大功告成！
这篇关于css动态彩虹背景,前端每日实战：59# 视频演示如何用纯 CSS 创作彩虹背景文字的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
