How to implement the King of Glory matching personnel loading page with CSS3
|
Those who have played King of Glory should be familiar with the effect of this page. Why do we want to achieve this effect?
First: King of Glory is so popular, and e-sports is so popular. Second: The main purpose is to learn CSS3 linear, radial gradient, rotation, scaling and animation. Graphical analysis 1. Background (radial gradient) 2. Player loading animation (linear gradient) 3. Background hollow rotating square 4. Square text enlargement animation 5. Text button production Let's follow the above steps to implement Background Production background: radial-gradient(center, shape size, start-color, …, last-color); The shape parameter defines the shape. It can be the value circle or ellipse. Among them, circle represents a circle and ellipse represents an ellipse. The default value is ellipse
<style>
.king{
position: relative;
height: 25rem;
width: 100%;
background:
radial-gradient(circle, #ccc, #161d4f 85%);
}
</style>
<div class="king"></div>
CSS3 linear, radial gradient, rotation, scaling, animation to achieve King of Glory matching personnel loading animation Player Loading The module is vertically centered as a whole, with a linear gradient. background: linear-gradient(direction/angle, color-stop1, color-stop2, …); direction/angle controls the gradient direction/angle.
<style>
...
.player-layout{
position: relative;
height: 8rem;
width: 100%;
background:
linear-gradient(to right, #212f46, #212f4670, #212f46);
top: 50%;
transform: translate(0,-50%);
z-index: 10;
}
</style>
<div class="king">
<div class="player-layout"></div>
</div>
CSS3 linear, radial gradient, rotation, scaling, animation to achieve King of Glory matching personnel loading animation Add canyon picture, background linear gradient, and rotation. Add a border and then use
<style>
...
.center{
position: absolute;
height: 8rem;
width: 8rem;
top: 50%;
left: 50%;
transform:
translate(-50%, -50%) rotate(45deg);
background:
linear-gradient(90deg, #212f46, #5b99ff);
border: .3rem solid #55a9ef;
box-shadow: 0px 0px .8rem #88c0f0;
padding: .2rem;
}
.center img{
width: 100%;
height: 100%;
}
</style>
<div class="king">
<div class="player-layout">
<div class="center"><img src="../images/123123.jpg"></div>
</div>
</div>
CSS3 linear, radial gradient, rotation, scaling, animation to achieve King of Glory matching personnel loading animation Next, divide the 10 players into 2 groups and place them on both sides of the canyon image.
<style>
...
...
.group{
position: relative;
width: calc((100% - 13rem)/2);
top: 50%;
transform: translate(0, -50%);
}
.group1{
text-align: right;
float: left;
}
.group2{
text-align: left;
float: right;
}
.palyer{
width: 4rem;
height: 4rem;
display: inline-block;
background: url('../images/123123.jpg');
background-size: cover;
border: .3rem solid #55a9ef;
box-shadow: 0px 0px .8rem #88c0f0;
}
</style>
...
<div class="player-layout">
<div class="group group1">
<div class="player1 palyer"></div>
<div class="player2 palyer"></div>
<div class="player3 palyer"></div>
<div class="player4 palyer"></div>
<div class="player5 palyer"></div>
</div>
<div class="group group2">
<div class="player6 palyer"></div>
<div class="player7 palyer"></div>
<div class="player8 palyer"></div>
<div class="player9 palyer"></div>
<div class="player10 palyer"></div>
</div>
<div class="center"><img src="../images/123123.jpg"></div>
</div>
...
Here, the width of each group is calculated using In the middle is a square with a side length of 8rem, so: diagonal length = 8rem squared x 2 and then take the square root. Here the length of the diagonal of the rectangle is approximately equal to 13rem.
Let's add a loading animation for each player border.
.player{
position: relative;
...
...
color: #fff;
}
.player::before,
.player::after {
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: -8%;
box-shadow: inset 0 0 0 .3rem;
animation: clipMe 6s linear infinite;
}
.player::before {
animation-delay: -3s;
}
@keyframes clipMe {
0%,
100% {
clip: rect(0, 4.8rem, 4.8rem, 4.3rem);
}
25% {
clip: rect(0px, 4.8rem, .3rem, 0);
}
50% {
clip: rect(0, .3rem, 4.8rem, 0);
}
75% {
clip: rect(4.3rem, 4.8rem, 4.8rem, 0rem);
}
}
The clip property clips absolutely positioned elements. What happens when an image is larger than the element that contains it? The "clip" attribute allows you to specify the visible size of an element so that the element will be clipped and displayed to that shape. The only legal shape values are: rect (top, right, bottom, left) This property is very interesting, and those who are interested can study it carefully. Finally, we add a highlight effect to the two groups.
.group::before, .group::after{
position: absolute;
content: '';
background: linear-gradient(to right,#212f4602, #7499d7, #212f4602);
height: .3rem;
width: 10rem;
}
.group::before{
top: -1.5rem;
}
.group::after{
bottom: -1.5rem;
}
.group1::before{
right: 0;
}
.group1::after{
right: 5rem;
}
.group2::after{
left: 5rem;
}
Ok, let's modify the player part to this first. If you are interested, please pull the source code and continue coding. Background hollow rotating square
<div class="king">
<div class="player-layout">
...
</div>
<div class="matrix"></div>
</div>
<style>
.matrix{
position: absolute;
height: 17.6rem;
width: 17.6rem;
background: #008cf4;
top: 50%;
left: 50%;
transform:
translate(-50%, -50%) rotate(45deg);
z-index: 1;
}
</style>
Why is the height here 17.6rem? This is also calculated using the Pythagorean theorem (a²+b²=c²). Knowing that the diagonal is the height of the container, 25rem, we can get the answer by taking the square root of 25x25/2.
There is a striking color at the top, where to put the container, and then let's beautify it
<style>
...
.border{
position: absolute;
height: 17.6rem;
width: 17.6rem;
text-align: center;
}
.border::before,.border::after{
position: absolute;
display: block;
width: 100%;
height: 2.5rem;
color: #fff;
background:
linear-gradient(to top,#212f4602, #7499d7);
}
.border1::before{
content: 'web front-end deduction group 784783012';
}
.border1::after{
bottom: 0;
content: 'Come with me';
transform: rotate(180deg);
}
.border2{
transform: rotate(90deg);
}
.border2::before{
content: 'Learn front-end';
}
.border2::after{
bottom: 0;
content: 'Let you show off';
transform: rotate(180deg);
}
</style>
...
<div class="matrix">
<div class="border border1"></div>
<div class="border border2"></div>
</div>Use two div elements to create a border, and add a linear gradient style to the border
Next, we will continue to modify the hollow square. The width and height were 17.6 before, but since we added borders and padding, we will remove them.
.matrix{
position: absolute;
/* Modify width and height */
height: 16.7rem;
width: 16.7rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
z-index: 1;
/* Add borders and spacing */
border: .1rem solid #7499d7;
padding: .4rem;
}
.border{
position: absolute;
/* Modify width and height */
height: 16.7rem;
width: 16.7rem;
text-align: center;
}
Square text enlargement animation Text shadow is made here. Scaling is not implemented yet. Currently, scaling will change the original text, so you must copy a new copy of the text. If you are interested, you can try it.
.border::before,.border::after{
...
animation: text-an 1.5s linear infinite;
}
@keyframes text-an {
0%{
text-shadow: 0 0 0 #ffffff;
}
100% {
text-shadow: 0 -6rem .4rem #ffffff10;
}
}
Text button production Use the :before and :after pseudo-classes to create a trapezoid.
<div class="king">
...
<div class="button">Confirm</div>
</div>
<style>
.button{
position: relative;
background: #3e3a31;
width: 6.5rem;
height: 2rem;
line-height: 2rem;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 11;
text-align: center;
cursor: pointer;
}
.button::before,.button::after{
position: absolute;
content: '';
display: inline-block;
width: 0;
height: 0;
border-width: 1.43rem;
border-style: solid;
border-color:
#3e3a31
transparent
transparent
transparent;
}
.button::before{
transform: rotate(-135deg);
left: -1.40rem;
top: -1.42rem;
}
.button::after{
transform: rotate(135deg);
right: -1.43rem;
top: -1.43rem;
}
</style>
This section of the article ends here. There are still some details that you can optimize when practicing operations. 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. |
<<: Vue sample code for implementing two-column horizontal timeline
>>: Detailed explanation of MySQL master-slave replication and read-write separation
Recommend
CentOS 7 switching boot kernel and switching boot mode explanation
centos7 switch boot kernel Note: If necessary, it...
A complete record of a Mysql deadlock troubleshooting process
Preface The database deadlocks I encountered befo...
How to create an Nginx server with Docker
Operating environment: MAC Docker version: Docker...
Use the vue-element-admin framework to dynamically obtain the menu function from the backend
Table of contents 2. Detailed explanation 2.1. Ad...
HTML data submission post_PowerNode Java Academy
The HTTP request methods specified by the HTTP/1....
Detailed explanation of jQuery's animate animation method and animation queuing problem solution
Table of contents animate() animation method Anim...
Detailed explanation of how MySQL solves phantom reads
1. What is phantom reading? In a transaction, aft...
CSS Pick-up Arrows, Catalogs, Icons Implementation Code
1. CSS Miscellaneous Icons There are three ways t...
Vue realizes the function of uploading photos on PC
This article example shares the specific code of ...
How to delete special character file names or directories in Linux
Delete a file by its inode number First use ls -i...
Talk about the understanding of CSS attribute margin
1.What is margin? Margin is used to control the sp...
8 ways to manually and automatically backup your MySQL database
As a popular open source database management syst...
Docker image analysis tool dive principle analysis
Today I recommend such an open source tool for ex...
CentOS8 installation tutorial of jdk8 / java8 (recommended)
Preface At first, I wanted to use wget to downloa...
Specific use of exception filter Exceptionfilter in nestjs
Speaking of Nestjs exception filter, we have to m...