CSS3 渐变(Gradients)
https://www.runoob.com/css3/css3-gradients.html
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/jKxyXN
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cZ8LNA7
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
整体代码:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
p {
font-size: 20vw;
margin: 0;
color: white;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
background-image: linear-gradient(
to right,
orangered,
orange,
gold,
lightgreen,
cyan,
dodgerblue,
mediumpurple,
hotpink,
orangered);
background-size: 110vw;
animation: sliding 30s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes sliding {
to {
background-position: -2000vw;
}
}
thanks
代码解读
定义 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;
}
大功告成!
复制另一篇带注释
html, body {
margin: 0;
padding: 0;
}
/* 设置body的子元素水平垂直居中 */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
/* 设置p中文字样式 */
p{
color: white;
/* 1. font 文档地址: http://www.w3school.com.cn/cssref/pr_font_font.asp ;
* 2.vw : 视口宽度 , vh : 视口高度 ;
*/
font: bold 20vw sans-serif;
text-transform: uppercase;
/* 设置彩虹背景 */
background-image: linear-gradient(
to right,
orangered,
orange,
gold,
lightgreen,
cyan,
dodgerblue,
mediumpurple,
hotpink,
orangered
);
background-size: 110vw;
/* 添加动画 sliding: 滑行的 */
animation: sliding 30s linear infinite;
/* 将背景颜色赋值给文字,文档地址: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
1、-moz代表firefox浏览器私有属性
2、-ms代表ie浏览器私有属性
3、-webkit代表safari、chrome私有属性
*/
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
@keyframes sliding {
to {
background-position: -2000vw;
}
}