效果预览点击右侧“点击预览”按钮可在当前页面进行预览,单击链接以全屏预览。https://codepen.io/comehop??e/pen/ZoxjXm交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cmQwKAa请从github下载源码。https://github.com/comehop??e/front-end-daily-challenges/tree/master/018-stroke-morphing-404-effects代码解释定义dom，容器包含3个
，每个
代表一个数字;每个p标签包含若干个，每个代表一个笔划：
居中显示：html,body{height:100%;显示：弹性；对齐项目：居中；证明内容：居中；背景：线性渐变（灰色，银色）；}整体布局：.四零四p{宽度：10em;高度：10em；边框：1px白色虚线；显示：内联电子块；保证金：1em；position:relative;}设置笔划共有属性：.four-0-fourpspan{position:absolute;框大小：边框框；filter:opacity(0.8);}画出数字4的笔划：.fourspan:nth-child(1){width:20%;高度：80%；左：10%；}.四个跨度：第n个孩子（2）{宽度：100%；高度：20%；bottom:30%;}.fourspan:nth-child(3){width:20%;高度：100%；right:10%;}画出数字0的笔划：.zerospan:nth-child(1){width:20%;高度：100%；左：10%；}.零跨度：nth-??child(2){宽度：100%；高度：20%；顶部：10%；}.zero跨度：nth-??child(3){宽度：20%；高度：100%；右：10%；}.零跨度：nth-??child(4){宽度：100%；高度：20%；bottom:10%;}给笔划上色：.fourspan:nth-child(1){background-color:yellowgreen;}.fourspan:nth-child(2){background-color:turquoise;}.fourspan:nth-child(3){background-color:pink;}.zerospan:nth-child(1){background-color:skyblue;}.zerospan:nth-child(2){background-color:plum;}.zerospan:nth-child(3){background-color:lightcoral;}.zerospan:nth-child(4){background-color:peachpuff;}设置笔画经过时的变化效果数字：.四零四p:hoverspan{border:1pxsolidblack;背景颜色：透明；过滤器：不透明度（1）；transition:0.3s;}设置划线在穿越数字时的偏移量：.four:hoverspan:nth-child(1){left:0;}.four:hoverspan:nth-child(2){bottom:0;}.four:hoverspan:nth-child(3){right:0;}.zero:hoverspan:nth-child(1){left:0;}.zero:hoverspan:nth-child(2){top:0;}.zero:hoverspan:nth-child(3){right:0;}.zero:hoverspan:nth-child(4){bottom:0;}最后，设置缓动持续时间：.four-zero-fourpspan{transition:0.3s;}.four-zero-fourp:hoverspan{transition:0.3s;}你完成了！知识点不透明度https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Functionsnth-child()https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-childtransitionhttps://developer.mozilla.org/en-US/docs/Web/CSS/transition
