CSS实现霓虹灯效果

1.动画——霓虹灯

本期我们要实现一个开关控制的霓虹灯,难度系数2.5

该动画使用纯css实现,没有使用js. 通过渐变背景技术,模拟金属拉丝的按钮,用投影技术实现霓虹灯效果。用:check和兄弟选择器实现按钮开关霓虹灯!

2.分析需求——庖丁解牛

 

a.霓虹灯的效果

   利用box-shadow多层阴影效果,制作出霓虹灯发光的效果

b.按钮的金属拉丝效果

   使用背景渐变色的多重叠加,模拟金属拉丝的凹凸质感和金属平面的光晕。

c.按钮开关霓虹灯

   利用<input type=“checkbox”>复选按钮,以及它特有的:checked选择器,记录开/关状态,同时用兄弟选择器,关联控制霓虹灯的标签,实现开关功能

 

更多内容欢迎大家扫码订阅《躁动的web动画》,有更多精彩动画的教程和源代码,每周更新

猜你喜欢

转载自blog.csdn.net/konglingbin66/article/details/82758967