效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/jKxyXN
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cZ8LNA7
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中有一段文本:
<p>thanks</p>
居中显示:
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;
}
大功告成!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。