共计 6407 个字符，预计需要花费 17 分钟才能阅读完成。
大家好，我是 零一 ，明天给大家表演 仅用一个 HTML 标签实现带动画的抖音 LOGO，波及了很多知识点，欢送交换探讨
先上后果，最终实现成果如下：
还原度应该还能够吧？
抖音 Logo 构造
想要用 CSS 来画抖音的 Logo，前提要先理解它的结构，肯定是一些几何图形的拼接组合，因为之前很多业界大佬曾经扒过抖音的 Logo 的构造了，我就拿来借用一下：
好的，有点简单，简化一下，其实就是 4 个局部
每个色彩划进去的区域代表一个局部，所以最初是：1/ 4 圆环 + 半圆 + 长条矩形 + 半径略大一些的 1 / 4 圆环
制作思路
回到本文题目，有人要说我题目党了，这 logo 都划分成四个局部了，你怎么用一个标签搞定呢？就算你用 ::before 和 ::after，也加上标签本体一共也就三个局部
而且！抖音的 logo 是有两层的：
能够看到，是一个青色的音符和一个红色的音符叠加的
所以！ 这么多元素，你怎么用一个标签实现呢？而且还说带动画，是不是逗咱们玩呢？
好了，别急，咱们先捋一下思路哈：
-
先从元素的大方向开始思考：
- 须要实现一个彩色背景（须要一个标签）
- 两个音符叠加（” 彩色背景 ” 曾经是一个标签了，那两个音符只能是两个伪元素）
-
再从元素的小细节着手冲破：
- 须要在一个伪元素中一笔画出整个音符图案（容我思考一下 …）
如何在一个伪元素中一笔画出整个音符图案呢？
💡 想到方法了，超级简略，给大家演示一下
<style>
/* 为了保障文章整洁，省略一些代码... */
.douyin::before {background: url('青色的音符.png')
}
.douyin::affter {background: url('红色的音符.png')
}
</style>
<div class="douyin"/>好了，轻松搞定，本文完结！鼓掌👏🏻 大家 点赞、珍藏、转发 走起~
别骂了，别骂了，刚刚跟大家开了个小玩笑，注释走起！
咱们必定是要用到 background 属性的，不然哪来的色块啊，去扒一下 MDN 文档：
都不必想了，只有一个 background-image 有用，那再具体看看：
划重点了！同学们，background-image 反对为一个元素设置一个或多个图像，来看一下其反对哪些图像类型：
看了语法，发现基本上 <image> 类型反对的都是间接设置图片的，唯独有一个反对突变函数的，例如：linear-gradient、repeating-linear-gradient、radial-gradient、conic-gradient …
如果你还不会看 CSS 的语法，能够看我之前写的 热议：CSS 为什么这么难学？肯定是你的办法不对，超具体地解说了如何解读 CSS 的语法（带实战的）
什么是突变函数呢？依据它们的单词名字能够晓得，反对了 线性、径向（其实就是圆）、锥形 的色彩突变。咱们用前两个就能够满足抖音 logo 的结构了
因为依据 MDN 上的解释，咱们是能够应用多个突变函数来管制元素的背景图像的，多个值用 , 隔开，例如官网的例子：
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
url("../../media/examples/lizard.png");用个比拟形象的比喻，background-image 就像咱们写字一样，写字须要一笔一划写，而 background-image 中 , 隔开的每一个值就像每一个笔画，这些值独特组成了一个 “ 图像 ”
那咱们就能够借助这些函数来画出抖音的 logo 了
开搞开搞
先来测量一下抖音 logo 中 音符 的 长宽比，为了等会给音符留出肯定的空间
顺便用截图工具圈出了红色音符的局部，失去的宽高是 248 * 285，计算一下宽高比就约等于 248/285 = 0.87，那咱们就要在两头留出一个宽高比为 0.87 的矩形地位给音符
打地基
那就先打地基！
<style>
.douyin {
width: 100px;
aspect-ratio: 0.87; /* 宽高比 0.87 */
border-radius: 25%;
padding: 20px calc(20px + 100px / 0.87 * 0.13 / 2); /* 周围留白，两头腾出地位给音符 */
background-color: #000;
}
</style>
<div class="douyin" />这里须要解释一下 padding 的值的设定，20px 是我轻易设置的一个边距大小，既然顶部和底部都是 20px，而且自身整体元素的宽高比又不是 1:1（整体不是正方形），那为了视觉上的居中和整体宽高的 1:1，咱们须要将左右边距增大至整体宽度与高度相等
因而 100px / 0.87 拿到的就是整体的高度，再乘以 0.13 拿到的就是宽高的差值，因为要平均分到两边，所以还要除以 2
当初妥妥是个正方形了，以后的成果：
这里为了让等会的音符只在图中的那块儿区域绘制，咱们给内部容器设置一下 display: grid，等会还须要借助 grid 布局的能力
.douyin::before,
.douyin::after {
content: '';
grid-area: 1/1; /* 居中展现 */
}画 1 / 4 圆环
如何 画圆环？用一个简略的例子来演示一下：
<style>
.demo {
/* demo 是一个正方形 */
background:
radial-gradient(
100% 100% at 100% 100%,
transparent 0 50%,
red 50% 100%,
transparent,
);
}
</style>
<div class="demo"/>咱们就失去了一个这样的图形：
怎么失去这样的 1/ 4 圆环 的呢？咱们把款式拆解一下：
100% 100% at 100% 100%：
at 的左侧 示意圆（或椭圆）在横向、竖向的半径长度；at 的右侧 示意圆形在坐标轴上的地位
那对应到这个图上就是：
transparent 0 50%
radial-gradient() 函数除了第一个参数，其余的参数都示意 色彩及突变水平
因而 transparent 0 50% 示意从 圆心 开始到 半径为一半长度的地位 色彩为 通明
这里怕大家看不出来，我把 transparent 改成 blue，放效果图给大家看：
red 50% 100%
原理同上一个，从半径为 50% 的地位始终到半径为 100% 的局部，显示红色
效果图为：
其实只有 黄色箭头 所指出的这个区域是咱们代码造成的，那为什么始终到正方形的左上角都是红色呢？因为radial-gradient() 函数须要最初设置一个 color-stop，请看上面
transparent
这也是函数的最初一个参数，示意突变以 通明色 为完结，即从上一个地位（red 50% 100%）的完结地位开始始终到容器的边缘，都显示为通明
当初再来看看成果：
这样一个 1/ 4 圆环 就画好了
那么回到咱们的注释来
.douyin::before,
.douyin::after {
content: '';
grid-area: 1/1; /* 居中展现 */
+ background:
+ radial-gradient(
+ 100% 100% at 100% 100%,
+ transparent 0 50%,
+ #08fff9 50% 100%,
+ transparent
+ );
}当初咱们寄存音符的容器是一个宽高比为 0.87 的长方形，如果依照咱们刚刚画矩形的代码来，最初进去的应该是这样的：
很显著，圆环的两端宽度不统一，此时咱们能够利用 background-size 对其进行压缩，以此失去一个宽度统一的圆环，我摆烂了，懒得计算了，间接控制台微调吧
这下差不多等宽了，且大略是一个规范的 1/ 4 圆环，而后咱们要把它放到左侧两头靠下一点的地位，代码如下：
.douyin::before,
.douyin::after {
content: '';
grid-area: 1/1; /* 居中展现 */
background:
radial-gradient(
100% 100% at 100% 100%,
transparent 0 50%,
#08fff9 50% 100%,
transparent
)
+ left 52%/41% 36% no-repeat;
}有内味儿了，有没有？
画半圆
原理都类似，就放一个半圆的生成以及位移过程图吧：
代码如下，也不过多解释各种数值的意义了，因为我全是微调的：
.douyin::before,
.douyin::after {
content: '';
grid-area: 1/1; /* 居中展现 */
background:
radial-gradient(
100% 100% at 100% 100%,
transparent 0 50%,
#08fff9 50% 100%,
transparent
) left 52%/41% 36% no-repeat,
+ radial-gradient(
+ 50% 100% at top,
+ transparent 44%,
+ #08fff9 45% 98%,
+ transparent
+ ) 0 100%/73% 31% no-repeat;
}画长条
长条可能跟圆环和半圆不太一样，它用到的是 linear-gradient() 线性函数，咱们也不搞花里胡哨的操作，就间接把整个区域都铺满色彩，而后通过横纵缩放失去一个长方形吧
.douyin::before,
.douyin::after {
content: '';
grid-area: 1/1; /* 居中展现 */
background:
radial-gradient(
100% 100% at 100% 100%,
transparent 0 50%,
#08fff9 50% 100%,
transparent
) left 52%/41% 36% no-repeat,
radial-gradient(
50% 100% at top,
transparent 44%,
#08fff9 45% 98%,
transparent
) 0 100%/73% 31% no-repeat,
+ linear-gradient(#08fff9, #08fff9) 66% 0/20% 70% no-repeat;
}成果过程动画如下：
画半径稍大一些的 1 / 4 圆环
再次略过解说，间接看代码：
.douyin::before,
.douyin::after {
content: '';
grid-area: 1/1; /* 居中展现 */
background:
radial-gradient(
100% 100% at 100% 100%,
transparent 0 50%,
#08fff9 50% 100%,
transparent
) left 52%/41% 36% no-repeat,
radial-gradient(
50% 100% at top,
transparent 44%,
#08fff9 45% 98%,
transparent
) 0 100%/73% 31% no-repeat,
linear-gradient(#08fff9, #08fff9) 66% 0/20% 70% no-repeat,
+ radial-gradient(
+ 100% 100% at 100% 0,
+ transparent 0 58%,
+ #08fff9 58.5% 99%,
+ transparent
+ ) 100% 0/47% 41.8% no-repeat;
}效果图如下：
到此为止，一个音符就画好了，离胜利只剩一步之遥
拆分
刚刚咱们的代码时把 ::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 的 “ 异变 ” 吧
筹备好了吗？
1~
2~
3~
哇！不得不说，太难看了！哈哈哈哈，其实实现原理也不难，我只是给元素加了个 filter: invert(1); 的属性
最初
怎么样，我是不是没有题目党？的确是 仅用一个 HTML 标签，实现了一个带动画的抖音 Logo 吧？
最初心愿本文对大家有所帮忙，零一能力无限，如果本文有任何谬误，欢送评论区指出；如果你有更多的奇思妙想，也欢送评论区跟我一起探讨~
也贴心得给大家筹备了完完整整的示例代码，须要的小伙伴能够自行查看
残缺代码：https://github.com/zero2one3/…
我是 零一，分享技术，不止前端！下期见~