1.动画——霓虹灯
本期我们要实现一个开关控制的霓虹灯，难度系数2.5
该动画使用纯css实现，没有使用js. 通过渐变背景色技术，模拟金属拉丝的按钮，用投影技术实现霓虹灯效果。用:check和兄弟选择器实现按钮开关霓虹灯！
2.分析需求——庖丁解牛
a.霓虹灯的效果
利用box-shadow的多层阴影效果，制作出霓虹灯发光的效果
b.按钮的金属拉丝效果
使用背景渐变色的多重叠加，模拟金属拉丝的凹凸质感和金属平面的光晕。
c.按钮开关霓虹灯
利用<input type=“checkbox”>复选按钮，以及它特有的:checked选择器，记录开/关状态，同时用兄弟选择器，关联控制霓虹灯的标签，实现开关功能
更多内容欢迎大家扫码订阅《躁动的web动画》，有更多精彩动画的教程和源代码，每周更新
转载自原文链接, 如需删除请联系管理员。
原文链接：CSS实现霓虹灯效果，转载请注明来源！