CSS3 analysis of the steps for making Douyin LOGO

"Tik Tok" is also very popular and is said to have 700 million users.

Today we are going to study the TikTok logo to catch its attention.

Effect preview:

It is mainly composed of the new CSS3 attribute mix-blend-mode ", and then there are 3 colors: white, red, and sky blue.

Ok, let's complete a "J" first. Based on past experience, we split it into 3 parts.

Let's implement it step by step.

Complete Single "J"

<div class="jitter">
    <div class="logo"></div>
</div>

Add styles

.jitter {
  position: relative;
  width: 200px;
  margin: 100px auto;
}

// Part 1.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 47px;
  height: 218px;
  z-index: 1;
  background: #24f6f0;
}
// The second part.logo::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  border: 40px solid #24f6f0;
  border-right: 40px solid transparent;
  border-top: 40px solid transparent;
  border-left: 40px solid transparent;
  top: -110px;
  right: -183px;
  border-radius: 100%;
  transform: rotate(45deg);
  z-index: -10;
}
// The third part.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);
}

The first part is a rectangle.

The second part is 1/4 of the ring

The third part is 3/4 of the ring

There is a saying that goes "If the method is wrong, all efforts will be in vain." All front-end masters have their own learning methods, and the learning methods of web front-end are basically the same. For a beginner who knows nothing, he will not know how to learn at all, which is also the most direct cause of failure. Therefore, you must have someone to guide you when learning web front-end. If you are in a period of confusion and can't find your direction. You can join our front-end learning exchange group: 784783012. If there is anything you don't understand, feel free to ask me. Click: Front-end Learning Circle

Add another "J"

<div class="jitter">
    <div class="logo"></div>
    <div class="logo"></div>
</div>

The style only needs to be added

...
// Omit the styles above...
// 10px away from the first J
.logo:last-child {
  left: 10px;
  top: 10px;
  background: #fe2d52;
  z-index: 100;
}
// Fill with red.logo:last-child::before {
  border: 47px solid #fe2d52;
  border-top: 47px solid transparent;
}
.logo:last-child::after {
  border: 40px solid #fe2d52;
  border-right: 40px solid transparent;
  border-top: 40px solid transparent;
  border-left: 40px solid transparent;
}

The protagonist appears - mix-blend-mode

CSS3 adds a very interesting property – mix-blend-mode . The Chinese translations of mix and blend are both mixing, so the function of this property is literally translated as mixed blending mode. Of course, we usually call it mixed mode.

Blending mode is most commonly found in Photoshop and is one of the most powerful features in PS. Let's take a look at what properties of mix-blend-mode can be set:

mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: color; mix-blend-mode: luminosity; mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

Then we add mix-blend-mode:lighten

.logo:last-child {
  ...
  mix-blend-mode: lighten;
}

See the effect:

Isn’t it ok?

Then we add animation so that the second J slowly merges with the first J.

Animation Fusion

.logo:last-child {
  ...
  animation: move 10s infinite;
}
@keyframes move {
  0% {
    transform: translate(200px);
  }
  50% {
    transform: translate(0px);
  }
  100% {
    transform: translate(0px);
  }
}

Finally, the preview effect of the first picture can be achieved.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Suggestions on creating business HTML emails

>>: Detailed explanation of the process of realizing calculator function in javascript