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 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 – 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: 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
.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
Recommend
Detailed explanation of the use of Vue.js draggable text box component
Table of contents Registering Components Adding C...
MySQL replication table details and example code
MySQL replication table detailed explanation If w...
Detailed explanation of the general steps for SQL statement optimization
Preface This article mainly shares with you the g...
Use the sed command to modify the kv configuration file in Linux
sed is a character stream editor under Unix, that...
40 fonts recommended for famous website logos
Do you know what fonts are used in the logo desig...
Syntax alias problem based on delete in mysql
Table of contents MySQL delete syntax alias probl...
Detailed explanation of sample code for the improvement and changes brought by CSS variables to JS interactive component development
1. Qualitative changes brought by CSS variables T...
HTML vertical column display text to make the text display in vertical columns
Copy code The code is as follows: <span style=...
Implementation of nginx multiple locations forwarding any request or accessing static resource files
This article mainly introduces the implementation...
VMware Workstation 14 Pro installation and activation graphic tutorial
This article shares the installation and activati...
Examples of using provide and inject in Vue2.0/3.0
Table of contents 1. What is the use of provide/i...
How to reset password after forgetting password in MySQL8 (MySQL old method doesn't work)
The command line mysqld –skip-grant-tables cannot...
Three methods to modify the hostname of Centos7
Method 1: hostnamectl modification Step 1 Check t...
Summary of several common methods of JavaScript arrays
Table of contents 1. Introduction 2. filter() 3. ...
Detailed explanation of the pitfalls of mixing npm and cnpm
Table of contents cause reason Introduction to NP...