效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接进行预览全屏。https://codepen.io/comehop??e/pen/ELpRxj交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/czrWDfZ源码下载前端日常实战系列完整源码可以在github下载：https://github.com/comehop??e/front-end-daily-challenges代码解释定义dom，容器包含文本，包含4个用于特效，的data-text属性值与文本相同：web
中心显示：html,body{height:100%;显示：弹性；对齐项目：居中；证明内容：居中；background:black;}定义文字样式：.rainbow{color:white;字体大小：300px；文本转换：大写；字体系列：无衬线；字体粗细：粗体；行高：1em；span::after{内容：attr（数据文本）；位置：绝对；顶部：0；左：0；溢出：隐藏；}.rainbow跨度：nth-??child(1)::before{颜色：兰花；z-索引：1；高度：calc(100%-10%*1);}.rainbowspan:nth-child(1)::after{color:mediopurple;z-指数：2；height:calc(100%-10%*2);}.rainbowspan:nth-child(2)::before{颜色：deepskyblue;z-指数：3；height:calc(100%-10%*3);}.rainbowspan:nth-child(2)::after{颜色：青色;z-指数：4；height:calc(100%-10%*4);}.rainbowspan:nth-child(3)::before{颜色：medispringgreen;z-指数：5；height:calc(100%-10%*5);}.rainbowspan:nth-child(3)::after{颜色：黄色;z-指数：6；height:calc(100%-10%*6);}.rainbowspan:nth-child(4)::before{颜色：金色;z-指数：7；height:calc(100%-10%*7);}.rainbowspan:nth-child(4)::after{color:tomato;z-指数：8；height:calc(100%-10%*8);}增加动画效果：.rainbowspan::before,.rainbowspan::after{animation:animate0.8sinfinitealternate;过滤器：不透明度（0）；}@keyframes动画{来自{过滤器：不透明度（0）；}到{fi过滤器：不透明度（1）；}}设置层的延迟以增强动态：.rainbowspan:nth-child(1)::before{animation-delay:calc(0.8s-0.1s*1);}。rainbowspan:nth-child(1)::after{animation-delay:calc(0.8s-0.1s*2);}.rainbowspan:nth-child(2)::before{animation-delay:calc(0.8s-0.1s*3);}.rainbowspan:nth-child(2)::after{animation-delay:calc(0.8s-0.1s*4);}.rainbowspan:nth-child(3)::before{animation-delay:calc(0.8s-0.1s*5);}.rainbowspan:nth-child(3)::after{animation-delay:calc(0.8s-0.1s*6);}.rainbowspan:nth-child(4)::before{animation-delay:calc(0.8s-0.1s*7);}.rainbowspan:nth-child(4)::after{animation-delay:calc(0.8)s-0.1s*8);}最后，将原始文本设置为透明色：.rainbow{color:transparent;}就大功告成了！知识点内容https://developer.mozilla.org/en-US/docs/Web/CSS/contentattr()https://developer.mozilla.org/en-US/docs/Web/CSS/attrcalc()https//developer.mozilla.org/zh-CN/docs/Web/CSS/calcz-indexhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index:nth-child()https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
