前端日常实践：120#视频演示如何使用纯CSS制作锡纸撕破的文字效果
时间：2023-04-02 14:20:29
HTML
效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接即可全屏预览。https://codepen.io/comehop??e/pen/WgxbaZ互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c86pbcE源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含几个子元素，每个子元素包含一个字母：AWESOME
定义容器尺寸：body{margin:0;高度：100vh；}.text{宽度：100%；height:100%;}设置子元素的布局：.text{display:flex;justify-content:space-between;}.textspan{width:100%;}定义文字样式：.textspan{color:darkslategray;背景色：rgb(127,140,141)；字体系列：衬线；字体大小：12vmin；文本阴影：1px1px1px白色；显示：弹性；：中心;justify-content:center;}设置文本背景的渐变色，奇数和偶数的渐变方向相反：.textspan:nth-child(odd){background:linear-gradient(to底部，RGBA（127、140、141、0.2）0%,rgba(127,140,141,0)33%,rgba(127,140,141,0.7)66%,rgba(127,140,141,0.2)100%);}.text跨度:nth-child(even){background:linear-gradient(totop,rgba(127,140,141,0.2)0%,rgba(127,140,141,0)33%,rgba(127,140,141,0.7)66%,rgba(127,140,141,0.2)100%);}在文本之间添加分隔线，第一个文本之前没有分隔线：.textspan{position:relative;}.textspan:not(:第一个孩子：：之前{内容：'';位置：绝对；宽度：10px；高度：90%；背景色：黑色；左：-5px；左边框：1px纯白色；:50%;}错放上下分隔线：.textspan:not(:first-child):nth-child(odd)::before{top:2%;}.textspan:not(:first-child):nth-child(even)::before{bottom:2%;}大功告成！
