前端日常实践：100#视频演示如何用纯CSS制作闪闪发光的霓虹文字
时间：2023-03-31 13:09:39
CSS
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/GBwvxw互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cNLqJhR源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器中的三个元素分别代表文本、渐变背景和光影，文本还包含一个数据属性data-text：thanks
中心显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}设置文字样式:.text{background-color:black;白颜色;字体大小：180px；字体粗细：粗体；字体系列：无衬线字体；text-transform:uppercase;}添加带有伪元素和数据属性的文本以产生笔画效果：.text::before{content:attr(data-text);位置：绝对；白颜色;filter:blur(0.02em);}使用混合模式产生描边效果:.text::before{mix-blend-mode:difference;}设置渐变背景:.neon{position:relative;}.gradient{position:absolute;背景：线性渐变（45deg，红色，金色，浅绿色，金色，红色）；顶部：0；左：0；右：0；bottom:0;}在混合模式下将背景应用于文本：.gradient{mix-blend-mode:multiply;}使用径向渐变制作光影背景：.spotlight{position:absolute;顶部：0；左：0；右：0；底部：0；background:radial-gradient(circle,white,transparent25%)center/25%25%,radial-gradient(circle,white,black25%)center/12.5%12.5%;}设置光照和动画效果阴影移动：.neon{overflow:hidden;}.spotlight{top:-100%;左：-100%；动画：灯光5s线性无限；}@keyframes灯光{到{变换：平移（50%，50%）；}}使用混色模式对渐变背景应用光影：.spotlight{mix-blend-mode:color-dodge;}最后，调高亮度，让文字不可选：.neon{filter:brightness(200%);}.text{user-select:none;}大功告成！
