Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Code to achieve douyin Logo: douyin_Logo

TikTok and TikTok(Inspire Creativity and Bring Joy) are familiar! Both bright big Logo is also very dynamic! Think about using code to achieve the effect, then come on!

  • useHTMLTwo tags +CSSThe hybrid mode can be achievedTrill LOGO. Specific analysis is as follows:

Specific analysis (dissolution-analysis):

In order to achieve the LOGO of Douyin, it looks like three J shapes overlapping together, but if you look closely, it seems that the white one is different. It should be two J’s overlapping, so the red J and the blue J, which one is in front and which one is behind, gives another illusion.

We first decomposed the logo into a single, static monochrome logo:

Tik Yin – LOGO is decomposed into a single static monochrome logo. The specific decomposition diagram is as follows:

The picture above comes from a question on Zhihu: Why does the logo of Douyin seem to have the feeling of “electricity”, “flickering” and “vibration”? > > > 1)

Then, the single Douyin J is broken down in detail: it is actually assembled and superimposed by 1/4 circle, vertical line and 3/4 circle, which can be completed by using a label (plus two pseudo-elements).

In fact, two J-shapes are superimposed on each other, and the overlap appears as white. To achieve this feature, there is also a method of search: it is very easy to use the CSS mix-blend-mode property.

For a single monochrome Tiktok logo, the red color is lower when viewed from the top to the bottom, so the red label is placed behind:

CSS Mixed mode:mix-blend-mode: lighten – MDN

The key point is a CSS property:

The mix-blending-mode CSS attribute describes how the content of an element should be mixed with the content of the element’s immediate parent and the background of the element. > > > 2)

The overall logo-J structure was realized mainly with the help of pseudo-elements, and the fusion effect was realized with the help of mix-blend-mode, which superimposed and mixed the two colors red and blue

Use mix-blast-mode: lighten mixing mode to achieve the overlap of two J-shaped structures as “white “.

Note: The two colors shown here are not pure blue and red, but the combination of # 24F6F0 and # FE2D52 is not # FFFFFF pure white, but # FEf6f0, near white. Other colors can be mixed to try

The specific code is as follows:

So the overall effect only needs two HTML tags:

In order to facilitate debugging and analysis, we add a class name, in fact, a LOGO class can be implemented.

Tiktok background is black, we also set the body background to black, to achieve the same effect.

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

CSS style code:

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

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);
}
Copy the code

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;
}
Copy the code

Here is another animation to demonstrate the process of overlapping two Js into douyin Logo. The effect is as shown on the cover:

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

Reference article:

① The decomposition of a single monochrome static logo picture of Douyin: an answer from Zhihu: Why does the logo of Douyin seem to have the feeling of “electricity”, “flickering” and “vibration”?

Mix-blending-mode CSS attribute -blend mode