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
Elementui exports data to xlsx and excel tables
Recently, I learned about the Vue project and cam...
Detailed explanation of CSS style sheets and format layout
Style Sheets CSS (Cascading Style Sheets) is used...
How to modify the scroll bar style in Vue
Table of contents First of all, you need to know ...
MySQL slow query optimization: the advantages of limit from theory and practice
Many times, we expect the query result to be at m...
DOCTYPE Document Type Declaration (Must-Read for Web Page Lovers)
DOCTYPE DECLARATION At the top of every page you w...
Detailed operations of building RabbitMq's common cluster and mirror cluster with Docker
Table of contents 1. Build the operating environm...
Detailed explanation of how to restore database data through MySQL binary log
Website administrators often accidentally delete ...
Node script realizes automatic sign-in and lottery function
Table of contents 1. Introduction 2. Preparation ...
Simple method to install mysql under linux
When searching online for methods to install MySQ...
Several ways to encapsulate breadcrumb function components in Vue3
Table of contents Preface 1. Why do we need bread...
Example code for converting Mysql query result set into JSON data
Mysql converts query result set into JSON data Pr...
Simple web design concept color matching
(I) Basic concepts of web page color matching (1) ...
MySQL 5.7.24 installation and configuration method graphic tutorial
MySQL is the most popular relational database man...
Start nginxssl configuration based on docker
Prerequisites A cloud server (centOS of Alibaba C...
vue+elementui implements the complete code of adding and modifying a shared bullet box
Table of contents 1. New II. Modification element...