拆分
刚刚咱们的代码时把 ::before 和 ::after 放在一起写的，其实现在是两个一模一样的音符完全重叠，而且现在两个音符的颜色也是一样的，我们来改造一下
颜色通过变量获取
为了代码不冗余，咱们把刚才代码中所有的 #08fff9 用变量来获取，即 #08fff9 => var(--color)
.douyin::before, .douyin::after { content: ''; grid-area: 1/1; /* 居中展示 */ background: radial-gradient( 100% 100% at 100% 100%, transparent 0 50%, var(--color) 50% 100%, transparent ) left 52%/41% 36% no-repeat, radial-gradient( 50% 100% at top, transparent 44%, var(--color) 45% 98%, transparent ) 0 100%/73% 31% no-repeat, linear-gradient(var(--color), var(--color)) 66% 0/20% 70% no-repeat, radial-gradient( 100% 100% at 100% 0, transparent 0 58%, var(--color) 58.5% 99%, transparent ) 100% 0/47% 41.8% no-repeat; }
并单独给 ::before 和 ::after 设置颜色变量
+ .douyin::before { + --color: #08fff9; + } + .douyin::after { + --color: #f00044; + }
除此之外，我们要移动其中一个音符，让两个音符不再重叠
.douyin::before { --color: #08fff9; } .douyin::after { --color: #f00044; + transform: translate(3%, 3%); }
看看效果
好了，但两个音符错位了，但是颜色的混合效果好像还没有，这时候要用到 mix-blend-mode 属性了，MDN的定义就是使当前元素与其父元素的内容和背景以某种方式混合，支持的属性有些多，本文就不跳出去讲太多别的东西了，我直接在控制台一个个试过去，发现 lighten、plus-lighter、screen 都是能达到我们的效果的，不过具体作用我还不是很了解，日后可以学习一下
请看尝试过程👇
最后我们就设置下 mix-blend-mode: lighten吧
wow！ 我们的 Logo 制作好啦！
加个动画
抖音怎么不能不抖？
我们现在设置的是红色的音符向右向上偏移 3%，那我们现在就要这两个音符都抖起来，其实就是修改它们各自的偏移量。又要改造一下代码了！
.douyin::before { --color: #08fff9; transform: translate(calc(var(--x, 0%) - 3%), calc(var(--x, 0%) - 3%)); } .douyin::after { --color: #f00044; transform: translate(calc(3% - var(--x, 0%)), calc(3% - var(--x, 0%))); } /* hover时，设置偏移变量 --x */ .douyin:hover::before, .douyin:hover::after { --x: 0.1%; transition: transform cubic-bezier(.5,300,.5,-150) .3s; }
请看效果：
本来还想把我写过的一个 文字故障风 的效果加到这个 Logo 里的，一定很酷，但是有些无能为力，因为要给音符设置故障风效果，是要用到伪元素的，而现在音符本身已经是伪元素了，我不能脱离了我本文的标题 "仅用一个html标签，实现带动画的抖音Logo" ，如果你感兴趣，可以下去自己加上，到时候记得艾特我，我也想看看效果
想不到什么花里胡哨的动画了，最后再给大家表演一下 抖音Logo 的 "异变" 吧
准备好了吗？
3~
2~
1~
哇！不得不说，太好看了！哈哈哈哈，其实实现原理也不难，我只是给元素加了个 filter: invert(1); 的属性
最后
怎么样，我是不是没有标题党？确实是 仅用一个HTML标签，实现了一个带动画的抖音Logo 吧？
最后希望本文对大家有所帮助，零一能力有限，如果本文有任何错误，欢迎评论区指出；如果你有更多的奇思妙想，也欢迎评论区跟我一起探讨~
