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
Discussion on the Issues of Image Button Submission and Form Repeated Submission
In many cases, in order to beautify the form, the ...
Mysql database advanced usage of views, transactions, indexes, self-connections, user management example analysis
This article uses examples to describe advanced u...
HTML uses form tags to implement the registration page example code
Case Description: - Use tables to achieve page ef...
The difference and introduction of ARGB, RGB and RGBA
ARGB is a color mode, which is the RGB color mode...
Advanced and summary of commonly used sql statements in MySQL database
This article uses examples to describe the common...
MySQL 8.0.21 installation steps and problem solutions
Download the official website First go to the off...
Detailed explanation of creating, calling and managing MySQL stored procedures
Table of contents Introduction to stored procedur...
Two ways to use IIS to call X-Forwarded-For Header (XFF) to record the visitor's real IP
Problem: The website published through IIS is pla...
JS implements the dragging and placeholder functions of elements
This blog post is about a difficulty encountered ...
WeChat applet implements search box function
This article example shares the specific code for...
Implementing the page turning effect through sliding and the click event problem on the mobile terminal
aforementioned This article is very short~ The ma...
Detailed explanation of the use of Docker commit
Sometimes you need to install certain dependencie...
Basic concepts and usage examples of HTML inline elements and block-level elements
There are two types of html tags, inline elements...
MySQL 20 high-performance architecture design principles (worth collecting)
Open Source Database Architecture Design Principl...
How to use CSS attribute value regular matching selector (tips)
There are three types of attribute value regular ...