摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/GBwvxw
可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cNLqJhR
源代码下载每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读定义 dom,容器中的 3 个元素分别代表文本、渐变背景和光影,其中文本还包含一个数据属性 data-text:
thanks
居中显示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }
设置文字样式:
.text { background-color: black; color: white; font-size: 180px; font-weight: bold; font-family: sans-serif; text-transform: uppercase; }
用伪元素和数据属性增加文字,产生描边效果:
.text::before { content: attr(data-text); position: absolute; color: white; filter: blur(0.02em); }
用混色模式产生描边效果:
.text::before { mix-blend-mode: difference; }
设置渐变色背景:
.neon { position: relative; } .gradient { position: absolute; background: linear-gradient(45deg, red, gold, lightgreen, gold, red); top: 0; left: 0; right: 0; bottom: 0; }
用混色模式把背景作用到文字上:
.gradient { mix-blend-mode: multiply; }
用径向渐变制作光影背景:
.spotlight { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient( circle, white, transparent 25% ) center / 25% 25%, radial-gradient( circle, white, black 25% ) center / 12.5% 12.5%; }
设置光影移动的动画效果:
.neon { overflow: hidden; } .spotlight { top: -100%; left: -100%; animation: light 5s linear infinite; } @keyframes light { to { transform: translate(50%, 50%); } }
用混色模式把光影作用到渐变背景上:
.spotlight { mix-blend-mode: color-dodge; }
最后,调高亮度,并且使文字不能被选中:
.neon { filter: brightness(200%); } .text { user-select: none; }
大功告成!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113681.html
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbe2O1?w=400&h=299); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehop...
摘要:前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书以下是年月份发布的项目视频演示如何用纯创作一个按钮文字滑动特效视频演示如何用纯创作一个矩形旋转特效视频演示如何用纯创作一个容器厚条纹边 《前端每日实战》专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书! 以下是 2018 年 4 月份发...
摘要:前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书以下是年月份发布的项目视频演示如何用纯创作一个按钮文字滑动特效视频演示如何用纯创作一个矩形旋转特效视频演示如何用纯创作一个容器厚条纹边 《前端每日实战》专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书! 以下是 2018 年 4 月份发...
阅读 3552·2019-08-30 15:55
阅读 1343·2019-08-29 16:20
阅读 3624·2019-08-29 12:42
阅读 2630·2019-08-26 10:35
阅读 971·2019-08-26 10:23
阅读 3365·2019-08-23 18:32
阅读 828·2019-08-23 18:32
阅读 2845·2019-08-23 14:55