这是一场没有硝烟的战斗。我们普通人能做的就是宅在家里，等待疫情结束。向那些冒着生命危险救治患者的医护人员致敬！效果预览按右侧“点击预览”按钮可在当前页面进行预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/gObyOMQ源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解读1、定义DOM结构dom结构是一个名为.words的容器，里面包含5个
标签，每个
标签都有一句话： You 在没有硝烟的战场上 在战场上 生命之光 再次点燃
标签，所以每一句占用1em，形成竖排文字效果。文字的字号以vmin为单位，即字号随页面大小自动调整。.words{显示：flex;字体大小：15vmin；宽度：5em;}.wordsp{行高：1em;margin:0;}效果如下：文字加粗加阴影：.words{font-family:sans-serif;font-weight:bold;}.wordsp{text-shadow:0.05em0.05em0.3emhsla(0,0%,0%,0.4);}效果如下：设置页面颜色为dodgerblue，也就是宝石蓝。因为color属性会被子元素继承，所以文字的颜色也会变成宝石蓝，融入背景。事实上，你现在看到的只是文字的影子：body{color:dodgerblue;background-color:currentColor;}effect如下图所示：3.动画效果创建一个名为appear的关键帧，其中只有1帧，在动画周期的50%处为文字添加阴影。其实这行代码是从.wordsp搬来的。动画效果为无限循环动画，时长6秒：.wordsp{/*text-shadow:0.05em0.05em0.3emhsla(0,0%,0%,0.4);*/animation:appear6sease-in-outinfinite;}@keyframesappear{50%{text-shadow:0.05em0.05em0.3emhsla(0,0%,0%,0.4);}}效果如下图所示：接下来让每个句子一个一个出现实现方法是为每个
标签设置一个--n变量，然后为动画设置animation-delay属性,并使用表达式为所有
标签设置延迟时间从1秒到5秒，这样动画看起来像Wordsp{animation-delay:calc(var(--n)*1s);}.wordsp:nth-child(1){--n:1;}.wordsp:nth-child(2){--n:2;}.??wordsp:nth-child(3){--n:3;}.wordsp:nth-child(4){--n:4;}.wordsp:nth-child(5){--n:5;}效果如下图：接下来定义一个关键帧move，让p元素从原来的位置稍微向左移动到稍微向右，使动画更加动态。因为有appear和move这2个keyframes，所以需要添加一个animation-name属性，专门用来定义多组keyframes:.wordsp{/*animation:appear6sease-in-outinfinite;*/动画：6s无限缓入缓出；animation-name:appear,move;}@keyframesmove{from{transform:translateX(-30%);}to{transform:translateX(30%);}}效果如下：大功告成！参考flex排版，《CSS3 艺术》1.8.1节阴影，《CSS3 艺术》5.1.1动画，?第10章关于我的书《CSS3 艺术》我自己的《CSS3 艺术》全彩印刷，使用100多张，生动逼真精美实例，系统解析CSS视觉效果相关重要语法，包含近10小时视频演示。人民邮电出版社2020年1月出版，京东/天猫/当当网有售。配套资源请访问人民邮电出版社公众号：https://mp.weixin.qq.com/s/6X42QkZ5N8JNji8aQ2FFcQ
