特效制作的抖音标签是什么,抖音动漫特效是哪个图标

抖音Logo结构

　　如果想用CSS画出Tik Tok的Logo，首先要了解它的结构。肯定是一些几何图形的拼接组合，因为之前很多业界大佬已经把Tik Tok的Logo结构划了一下，我就借用一下：

　　好吧，有点复杂。简单来说，其实就是四个部分。

　　每个彩色区域代表一个零件，所以最后一个是：1/4环，半圆，条形，长方形，半径稍大的1/4环。

制作思路

　　回到本文标题，有人要说我是标题党了。这个标志分为四个部分。怎么用一个标签就能搞定？即使使用：before和：after，加上标签体，也只有三个部分。

　　还有！Tik Tok的标志有两层：

　　如你所见，一个青色音符和一个红色音符叠加在一起。

　　所以！元素那么多，怎么可能用一个标签就看完？更何况是关于动漫的。你在开玩笑吗？

　　好了，别急，先捋捋思路：

　　先从元素的大方向思考：

　　你需要一个黑色背景(你需要一个标签)叠加两个音符(黑色背景已经是一个标签了，那两个音符只能是两个伪元素)，然后从元素的小细节入手：

　　需要在一个伪元素中一笔画出整个音符图案(让我想想…)

如何在一个伪元素中一笔画出整个音符图案呢？

　　我想到个办法。超级简单。让我展示给你看。

　　Style /*为了保持文章整洁，省略一些代码.*/.dou yin:before { background:URL( cyan note . png )}。dou yin:aff ter { background:URL( red note . png )}/style div class= dou yin /大家鼓掌，点赞，收藏，转发，去吧~

　　不骂不骂，只是和大家开了个小玩笑，正文开始了！

　　我们肯定需要用到背景属性，否则色块从何而来？请浏览MDN文档：

　　想都别想。只有一个背景图像是有用的，所以仔细看看：

　　专注！同学们，background-image支持为一个元素设置一个或多个图像。让我们看看它支持哪些图像类型：

　　看了语法，发现基本上所有的图片类型都支持直接设置图片，除了一个支持渐变功能的，比如：线性-渐变，重复-线性-渐变，径向-渐变，圆锥形-渐变…

　　如果你还看不懂CSS的语法，你可以看看我之前写的热议：为什么CSS这么难学？一定是你的方法不对。你非常详细地解释了如何解释CSS的语法(教程)

　　什么是梯度函数？从它们的字名来看，它们支持线性、放射状(实际上是圆形)和圆锥形颜色渐变。我们可以利用前两者来满足Tik Tok标志的建设。

　　因为根据MDN上的解释，我们可以使用多个梯度函数来控制元素的背景图像，并且多个值由例如官方示例来分隔：

　　背景图像：线性渐变(rgba(0，0，255，0.5)，rgba(255，255，0，0.5))，url(././media/examples/lizard . png )；打个比喻，背景图像就像写字，写字需要笔画。在背景图像中，每个分离的值就像每个笔画，这些值一起形成一个“图像”

　　然后我们可以使用这些功能来绘制Tik Tok的标志。

开搞开搞

　　我们先来测量一下Tik Tok logo中注释的长宽比，以便后面给注释留些空间。

　　用专门的截图工具圈出红纸条的部分，长宽为248 * 285。如果我们计算宽高比，大概是248/285=0.87。然后我们要在中间给音符留一个长宽比为0.87的矩形位置。

打地基

　　那就先打基础吧！

　　风格。斗印{宽度：100px长宽比：0.87；/*纵横比为0.87 */border-radius:25%；填充：20px calc(20px 100px/0.87 * 0.13/2)；/*周围留白，为中间的笔记腾出空间*/background-color:# 000；}/style div class= dou yin /这里需要说明一下填充值的设置。20px是我随便定的一个边距大小。由于顶部和底部都是20px，整个元素本身的长宽比不是1:1(整体不是正方形)，为了视觉居中和1:1的整体宽高，我们需要增加左右边距，直到整个宽高相等。

　　所以100px/0.87就是整体高度，再乘以0.13就是宽高之差，除以2是因为两边要平分。

　　现在它是一个正方形。当前效果：

　　这里，为了使注释只画在图片的那个区域，我们为外部容器设置了display: grid，后来我们需要网格布局的能力。窦银：之前，{ content:“”之后的douyin:为；网格面积：1/1；/*显示在中间*/}

画1/4圆环

　　如何画圆？用一个简单的例子来说明：

　　风格。demo {/* demo是正方形*/background:radial-gradient(100% 100% at 100% 100%，透明0 50%，红色50% 100%，透明，)；}/stylediv class=demo/我们得到了这样一个图表：

　　你是怎么得到这样一个四分之一圆的？我们来拆解一下风格：

　　100% 100%在100% 100%时：

　　at左侧表示圆(或椭圆)在水平和垂直方向的半径长度；at的右侧表示圆在坐标轴上的位置。

　　与这张图相对应：

　　透明0 50%

　　除了radial-gradient()函数的第一个参数，所有其他参数都指示颜色和渐变程度。

　　所以透明度0 50%是指颜色从圆心到半径一半的位置都是透明的。

　　恐怕你在这里看不到。我将透明改为蓝色，并向您展示效果图：

　　红色50% 100%

　　原理和上一个一样。从半径为50%的位置到半径为100%的部分，显示红色。

　　效果图是：

　　其实只有黄色箭头所指的区域是我们的代码造成的，那么为什么一直到正方形的左上角都是红色的呢？因为radial-gradient()函数需要在末尾设置一个颜色停止，请看下面。

　　透明的

　　这也是函数的最后一个参数，表示渐变以透明色结束，即从前一个位置的末端(红色50% 100%)到容器的边缘，显示为透明。

　　现在我们来看看效果：

　　这样1/4圈就完了。

　　然后回到我们的文本。窦银：之前，{ content:“”之后的douyin:为；网格面积：1/1；/*中心显示*/背景：径向渐变(100% 100% at 100% 100%，透明0 50%，# 08ff9 50% 100%，透明)；}现在我们存放笔记的容器是一个长宽比为0.87的长方形。如果我们按照刚才画矩形的代码，最终的矩形应该是这样的：

　　显然，环两端的宽度是不同的。这时候我们可以用background-size对其进行压缩，从而得到一个宽度相同的圆环。我懒得计算，直接在控制台上微调就好了。

　　这是差不多的宽度，大概是标准的1/4环。然后，我们要把它放在左边中间较低的位置。代码如下：窦银：之前，{ content:“”之后的douyin:为；网格面积：1/1；/*中心显示*/背景：径向渐变(100% 100% 100% at 100% 100%，透明0 50%，# 08ff9 50% 100%，透明)左52%/41% 36%无重复；}它有一种内在的味道，是吗？

画半圆

　　原则上都差不多，我们放一个半圆的生成和位移过程的示意图：

　　代码如下，不过我不用过多解释各种数值的含义，因为我都在微调：窦银：之前，{ content:“”之后的douyin:为；网格面积：1/1；/*中心显示*/背景：径向渐变(100% 100% 100%，透明0 50%，# 08ff9 50% 100%，透明)左侧52%/41% 36%不重复，径向渐变(顶部50% 100%，透明44%，# 08ff 9 45% 98%，透明)0 100%/73% 31%不重复；}

画长条

　　条形可能与圆形和半圆形不同。它用的是linear-gradient()线性函数，我们不搞花哨的运算。我们只需用颜色铺开整个区域，然后水平和垂直缩放，得到一个矩形。窦银：之前，{ content:“”之后的douyin:为；网格面积：1/1；/*中心显示*/背景：径向渐变(100% 100% 100%，透明0 50%，# 08ff9 50% 100%，透明)左侧52%/41% 36%不重复，径向渐变(顶部50% 100%，透明44%，# 08ff9 45% 98%，透明)0 100%/73% 31%不重复，线性渐变(# 08ff 9，# 08ff 9}效果的动画流程如下：

画半径稍大一些的1/4圆环

　　再次跳过解释，直接看代码：窦银：之前，{ content:“”之后的douyin:为；网格面积：1/1；/*中心显示*/背景：径向渐变(100% 100% 100%，透明0 50%，# 08ff9 50% 100%，透明)左侧52%/41% 36%不重复，径向渐变(顶部50% 100%，透明44%，# 08ff9 45% 98%，透明)0 100%/73% 31%不重复，线性渐变(# 08ff 9，# 08ff 9}效果图如下：

　　至此，已经画了一个音符，离成功只有一步之遥。

拆分

　　我们只是在编写代码时将：before和：after放在一起。事实上，现在两个相同的音符完全重叠，现在两个音符是相同的颜色。让我们改变它。

颜色通过变量获取

　　为了代码冗余，我们用变量来获取刚才代码中的所有#08fff9，即#08fff9=var( - color)。窦银：之前，{ content:“”之后的douyin:为；网格面积：1/1；/*中心显示*/背景：径向渐变(100% 100% 100%，透明0 50%，var (-color) 50% 100%，透明)左侧52%/41% 36%不重复，径向渐变(顶部50% 100%，透明44%，var( - color) 45% 98%，透明)0 100%/73% 31%不重复，线性渐变(var (-color)，var( - color)) 66% 0/20}并分别为：before和：after设置颜色变量。dou yin:before {-color:# 08ff F9；} .dou yin:after {-color:# f 00044；}此外，我们还要移动其中一个音符，使两个音符不再重叠。dou yin:before {-color:# 08ff F9；}.dou yin:after {-color:# f 00044；transform: translate(3%，3%)；}看效果。

　　好吧，但是两个音符错位了，但是混色效果好像还没达到。这时，我们需要使用mix-blend-mode属性。MDN的定义是将当前元素的内容和背景以某种方式与其父元素混合。有一些支持的属性，本文就不跳出来说太多其他的了。我直接在主机里一个一个的试了一下，发现lighten，plus-lighter，screen都可以达到我们的效果。"

　　请看审判流程。

　　最后，我们来设置mix-mix-blend-mode: lighten。

　　哇！我们的Logo做出来了！

加个动画

　　 Tik Tok为什么不能不抖？

　　现在我们将红色音符设置为向右上方偏移3%，所以我们现在要摇动两个音符，这实际上是修改它们各自的偏移。是时候再次修改代码了！dou yin:before {-color:# 08ff F9；transform:translate(calc(var( - x，0%) - 3%)，calc(var(-x，0%)-3%))；}.dou yin:after {-color:# f 00044；transform:translate(calc(3% - var( - x，0%))，calc(3%-var(-x，0%))；}/*悬停，设置偏移变量-x */。斗音：悬停：之前，dou yin:hover:after {-x:0.1%；过渡：转换三次贝塞尔曲线(. 5，300， 5，-150). 3s；}请看效果：

　　本来想给这个Logo加上我写的一段文字的断层风效果。肯定很酷，但是我无能为力，因为要在音符上设置断层风效果，就要用伪元素，现在音符本身就是伪元素。我离不开我这篇文章的标题“只用一个html标签用动画实现Tik Tok Logo”。有兴趣的可以下去自己加。记住Ait和我想。

　　想不出什么花哨的动画。最后，让我们向您展示Tik Tok标志的“变体”。

　　你准备好了吗？

　　哇！不得不说，太美了！哈哈，其实实现原理并不难。我只是添加了一个过滤器：invert(1)到元素；的属性

最后

　　怎么样？我没有标题党吗？真的只用一个HTML标签就实现了一个Tik Tok动画标志吗？

　　最后希望这篇文章对大家有帮助，零一能力有限。本文如有错误，请在评论区指出；如果你有更多的想法，欢迎在评论区和我讨论~

　　还贴心的为大家准备了完整的样本代码，需要的小伙伴可以自行查看。

　　完整代码：

　　https://github . com/zero 2 one 3/code-example/blob/main/CSS/write _ tiktok _ logo _ with _ one _ html _ tag . html

　　我是零一，分享技术，不只是前端！下次见~

　　更多关于HTML标签实现动画Tik Tok LOGO的信息请关注其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。