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
MySql COALESCE function usage code example
COALESCE is a function that refers to each parame...
How to set the number of mysql connections (Too many connections)
During the use of mysql, it was found that the nu...
Regarding the Chinese garbled characters in a href parameter transfer
When href is needed to pass parameters, and the p...
How can we promote Jiedaibao so that everyone will register? Jiedaibao promotion methods and skills
Jiedaibao is a mobile phone loan software platfor...
Possible reasons why the input type="reset" tag in HTML is invalid (does not work).
When using the <html:reset> tag, sometimes w...
Steps for IDEA to integrate Docker to achieve remote deployment
1. Enable remote access to the docker server Log ...
An article to understand what is MySQL Index Pushdown (ICP)
Table of contents 1. Introduction 2. Principle II...
Ubuntu 18.0.4 MySQL 8.0.20 installation and configuration method graphic tutorial
The installation and configuration method of MySQ...
Mysql inner join on usage examples (must read)
Grammatical rules SELECT column_name(s) FROM tabl...
Handwriting implementation of new in JS
Table of contents 1 Introduction to the new opera...
Overview and application of position attributes (absolute|relative|static|fixed) in CSS
Let's first look at the definition of the pos...
Solution to the problem that the image name is none after Docker load
Recently, I found that after using the docker loa...
Mysql optimization tool (recommended)
Preface While browsing GitHub today, I found this...
WeChat Mini Program user authorization to obtain mobile phone number (getPhoneNumber)
Preface The mini program has a very convenient AP...
How to encapsulate timer components in Vue3
background When you open the product details on s...