Tiktok LOGO method for CSS3 analysis

Time:2020-2-17

“Tiktok” is also very popular, it is said that it has 700 million users.

Today we will study the logo of the trembling sound, tiktok.

Effect preview:

Mainly use CSS3 to add attributesmix-blend-modeThere are three colors, white, red, and sky blue.

OK, let’s finish a “J”. Based on the past experience, we split it into three parts.

Let’s implement it step by step.

Complete a single “J”


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

Add styles

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

//Part I
.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 47px;
  height: 218px;
  z-index: 1;
  background: #24f6f0;
}
//Part II
.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;
}
//Part III
.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 a quarter of the circle

The third part is about three quarters of the circle

There is a saying called “the method is wrong, and the effort is wasted.” all the front-end gods have their own learning methods, and the learning of Web front-end is basically the same. For a beginner who doesn’t understand anything, he doesn’t know how to learn, which is also the most direct cause of failure. So learn the web front-end must have someone to point out. If you’re in a period of confusion, you can’t find a direction. You can join our front-end learning exchange Qun: 784783012. Ask me anything you don’t understand. Click: front end learning circle

Add another “J”


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

Styles only need to be added

...
//Omit the style above
...
//10 px away from the first j
.logo:last-child {
  left: 10px;
  top: 10px;
  background: #fe2d52;
  z-index: 100;
}
//Fill in 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;
}

 

Leading role on stage – mix blend mode

CSS3 added an interesting propertymix-blend-modeThe Chinese free translation of mix and blend is mixed, so the function of this attribute is the mixed mixed mode. Of course, we usually call it the mixed mode.

Mixed mode is the most common in Photoshop, which is one of the most powerful functions in PS. Let’s take a lookmix-blend-modeWhich properties can be set:

Mix blend mode: normal; // normal
Mix blend mode: multiply; // positive overlay
Mix blend mode: screen; // filter
Mix blend mode: overlay; // overlay
Mix blend mode: darken; // darken
Mix blend mode: lighten; // lighten
Mix blend mode: Color Dodge; // color fade
Mix blend mode: color burn; // color burn
Mix blend mode: hard light; // strong light
Mix blend mode: soft light; // soft light
Mix blend mode: difference; // difference
Mix blend mode: exclusion; // exclusion
Mix blend mode: hue; // hue
Mix blend mode: saturation; // saturation
Mix blend mode: color; // color
Mix blend mode: luminosity; // brightness

mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

Then we addmix-blend-mode:lighten


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

Look at the effect:

Is it OK?

Then we add animation and let the second J blend slowly with one 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 whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.

Recommended Today

The application of USB camera in rk3399

The application of USB camera in rk3399 1, introduction UVCFull nameUSB Video Class, is a set of standard customized by usb-if. All USB interface cameras complying with this standard can almost be used directly under Windows Linux and other systems, achieving the similar effect of drive free. Of course, it doesn’t mean that there is […]