声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。背景《声生不息》是芒果TV、香港电视广播有限公司和湖南卫视联合推出的港乐竞唱献礼节目，听着音乐仿佛回到了那个令人怀念的港风席卷整个亚洲的年代。该节目Logo采用经典红蓝配色，无限符号∞造型，满满的设计感。本文在仅采用原生CSS的情况下，尽量还原实现该Logo造型，本文内容虽然非常简单，但是用到的知识点挺多的，比如：repeating-linear-gradient、clip-path、background-clip、Window.getComputedStyle()、CSSSt
1.效果展示在线查看2.开始前说明效果实现参考源码：Logo聚集与散开原效果代码基于reactjsx类组件实现。依赖旧，代码冗余。我将基于此进行重构，重构目标：基于最新依赖包，用ts+hook实现效果简化dom结构及样式支持响应式重构应该在还原的基础上，用更好的方式实现相同的效果。如果能让功能更完善，那就更好了。在重构的过程中，注意理解：严格模式获取不到最新数据，setState异步更新，useRef同步最新数据类组件生命周期，如何转换为hookcanvas上绘图获取图像数据，并对数据进行处理3.重构说明：后面都是代码，对代码感兴趣的可以与源码比较一下；对效果感兴趣的，希望对你有帮助！脚手架：
1.效果展示在线查看2.开始前说明效果实现参考源码：Logo聚集与散开原效果代码基于reactjsx类组件实现。依赖旧，代码冗余。我将基于此进行重构，重构目标：基于最新依赖包，用ts+hook实现效果简化dom结构及样式支持响应式重构应该在还原的基础上，用更好的方式实现相同的效果。如果能让功能更完善，那就更好了。在重构的过程中，注意理解：严格模式获取不到最新数据，setState异步更新，useRef同步最新数据类组件生命周期，如何转换为hookcanvas上绘图获取图像数据，并对数据进行处理3.重构说明：后面都是代码，对代码感兴趣的可以与源码比较一下；对效果感兴趣的，希望对你有帮助！脚手架：
五彩斑斓的黑,这可是一个经典老梗了.几年前，有位设计师网友深受“甲方爸爸”之苦，于是乎就在社交平台上各种吐槽。其中引发热评一条跟帖就是以“想要五彩斑斓的黑”直怼甲方的无理要求。当然，玩梗归玩梗，如今细思起来，这个五彩斑斓似乎真的跟黑脱不开关系呢，为什么这么说？那咱就先从设计师工作上离不开的显示器说起。目前市面上的LCD液晶显示器三种面板：IPS(平面内切换)与VA(垂直对齐)和TN(扭曲向列)，这三者不同之处在于液晶是如何排列的。Part.1TN面板液晶以90度角扭曲并阻挡光线，然后在通电时液晶解扭曲并允许光线通过。TN面板是最便宜的，但画面效果不够理想。Part.2VA面板具有垂直排列的液晶
五彩斑斓的黑,这可是一个经典老梗了.几年前，有位设计师网友深受“甲方爸爸”之苦，于是乎就在社交平台上各种吐槽。其中引发热评一条跟帖就是以“想要五彩斑斓的黑”直怼甲方的无理要求。当然，玩梗归玩梗，如今细思起来，这个五彩斑斓似乎真的跟黑脱不开关系呢，为什么这么说？那咱就先从设计师工作上离不开的显示器说起。目前市面上的LCD液晶显示器三种面板：IPS(平面内切换)与VA(垂直对齐)和TN(扭曲向列)，这三者不同之处在于液晶是如何排列的。Part.1TN面板液晶以90度角扭曲并阻挡光线，然后在通电时液晶解扭曲并允许光线通过。TN面板是最便宜的，但画面效果不够理想。Part.2VA面板具有垂直排列的液晶
