HTML+CSS 实现 抖音&TikTok 大 Logo

阿飞756
2,083 阅读3分钟

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

代码实现抖音 Logo: douyin_Logo

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

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

具体分析(支解-剖析):

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

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

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

抖音-logo-具体分解示意图:

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

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

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

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

douyin-logo-single

douyin-logo-single

CSS 混合模式: mix-blend-mode: lighten - MDN

关键知识点是一个 CSS 属性: 混合模式:

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

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

利用 mix-blend-mode: lighten 混合模式实现两个 J 形 结构重叠部分为"白色".

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

具体代码实现如下:

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

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

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

image

<div class="logo-douyin">
  <div class="logo"></div>
  <div class="logo log-red"></div>
</div>

CSS 样式代码:

.logo-douyin {
  position: relative;
  width: 200px;
  padding: 100px;
  margin: 100px auto;
}

douyin-logo-red: #24f6f0

.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 47px;
  height: 218px;
  z-index: 1;
  background: #24f6f0;
  mix-blend-mode: lighten;
}
.logo::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  border: 40px solid #24f6f0;
  border-top: 40px solid transparent;
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
  top: -110px;
  right: -183px;
  border-radius: 100%;
  transform: rotate(45deg);
  z-index: -10;
}
.logo::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border: 47px solid #24f6f0;
  border-top: 47px solid transparent;
  border-radius: 50%;
  top: 121px;
  left: -147px;
  transform: rotate(45deg);
}

douyin-logo-red: #fe2d52

.logo-red {
  left: 10px;
  top: 10px;
  background: #fe2d52;
  z-index: 100;
  animation: move-to-mix-blend 6s infinite;
}
.logo-red::before {
  border: 47px solid #fe2d52;
  border-top: 47px solid transparent;
}
.logo-red::after {
  border: 40px solid #fe2d52;
  border-right: 40px solid transparent;
  border-top: 40px solid transparent;
  border-left: 40px solid transparent;
}

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

@keyframes move-to-mix-blend {
  0% {
    transform: translate(200px);
  }
  50% {
    transform: translate(0px);
  }
  100% {
    transform: translate(0px);
  }
}

参考文章:

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

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

avatar
文章
阅读
粉丝