本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

& ( Inspire Creativity and Bring Joy), 大家都特别熟悉了! 两者亮眼的大也是很有动感! 就想着用代码实现下其效果, 那就来吧!

• 使用 两个标签 + 的混合模式即可实现 . 具体分析如下:

要实现抖音的 看着像是 3 个 形重叠在一起, 再细看好像白色的不太一样, 那应该是两个 重叠了, 那这个 和 谁在前 谁在后, 又给人一种错觉...

我们首先 将这个分解成静态的单个单色 :

抖音-logo 分解为单个静态的 , 具体分解示意图：

上示图片来源于知乎问答的一个回答：为什么抖音的标志，看起来具有“电”“闪烁”“震动”的感觉？ >>>①

再把单个的抖音 进行详细分解: 其实是由 + + 拼合叠加而成，使用一个标签（加上两个伪元素）即可完成。

实际上，两个 形重叠在一起，重叠部分表现为白色，要实现这个特性, 查寻得到也有方法: 通过 的混合模式-属性 来实现非常简单!

单个单色 , 上下高低来看的话, 红色偏下面, 所以红色标签放后面:

关键知识点是一个 :

?CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。 >>>②

主要借助伪元素实现了整体 结构，借助了 实现融合效果, 将两种颜色 红 蓝 叠加混合

利用 混合模式实现两个 结构重叠部分为"白色".

注意: 这里演示的两种颜色并不是纯蓝色和纯红色,而分别为 和 两者混合而成的白色并不是纯白色, 而是 , 近白色. 其他颜色混合可以自行尝试

所以整体效果只需要两个 标签：

这里为了方便调试分析, 多加了个类名, 其实一个 就可以实现.

抖音背景为黑色, 我们也设置 背景为黑色, 就达到一致效果了.

CSS 样式代码:

这里再来个动画, 演示两个 重合拼叠成 的过程, 效果如封面所示:

① 抖音 单个单色静态 图片分解: 来源于知乎问答的一个回答：为什么抖音的标志，看起来具有“电”“闪烁”“震动”的感觉？

② MDN 对 CSS 属性-混合模式 的解释: