Shulou(Shulou.com)06/02 Report--

This article introduces the "how to use CSS3 to achieve Arena of Valor matching personnel load page" related knowledge, in the actual case of the operation process, many people will encounter such a dilemma, then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

Graphic analysis

1. Background (Radial gradient)

2. Player (player) load animation (linear gradient)

3. Background hollowed-out rotating square

4. Enlarge the animation of square text

5. Text button making

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 a value of circle or ellipse. Where circle represents a circle and ellipse represents an oval. The default value is ellipse

.king {position: relative; height: 25remr; width: 100%; background: radial-gradient (circle, # ccc, # 161d4f 85%);}

CSS3 linear, radial gradient, rotation, scaling, animation to achieve Arena of Valor matching personnel loading animation

Player load

The whole module is vertically centered and linearly graded.

Background: linear-gradient (direction/angle, color-stop1, color-stop2, …)

Direction/angle controls the direction / angle of the gradient.

.. player-layout {position: relative; height: 8remt; width: 100%; background: linear-gradient (to right, # 212f46, # 212f4670, # 212f46); top: 50%; transform: translate (0mai tel 50%); z-index: 10;}

CSS3 linear, radial gradient, rotation, scaling, animation to achieve Arena of Valor matching personnel loading animation

Add canyon picture, background linear gradient, rotation. Add a border, and then use box-shadow to look glowing.

.. center {position: absolute; height: 8remm; width: 8remm; 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%};

CSS3 linear, radial gradient, rotation, scaling, animation to achieve Arena of Valor matching personnel loading animation

Below, 10 players are divided into two groups and put on both sides of the canyon picture.

.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: 4remr; height: 4remr; display: inline-block; background: url ('.. / images/123123.jpg'); background-size: cover Border: .3rem solid # 55a9ef; box-shadow: 0px 0px .8rem # 88c0f0;}.

...

For the width of each group, calc () is used to calculate the width, (100%-rectangular diagonal length) / 2.

In the middle is a square whose side length is equal to 8rem, so the diagonal length equals the square x 2 of 8rem and then squares. Here the diagonal length of the rectangle is about equal to 13rem.

Let's add each player frame to load the animation

.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 00 0.3 rem; 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 attribute is mainly used.

The clip attribute clips the absolute positioning element.

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 is trimmed and displayed as this shape.

The only legal shape value is: rect (top, right, bottom, left)

This attribute is very interesting, if you are interested, you can study it carefully.

Finally, we add highlights to the two groups.

.group:: before, .group:: after {position: absolute; content:'; background: linear-gradient (to right,#212f4602, # 7499d7, # 212f4602); height: .3rem; width: 10remm;} .group:: before {top:-1.5remr;} .group:: after {bottom:-1.5remp1:: before {right: 0;} .group1:: after {right: 5remp2:: after {left: 5remp2;}

Ok, players of this piece we first modified to this, interested in pulling the source code to continue.

Background hollowed-out rotating square... position: absolute; height: 17.6remr; width: 17.6remr; background: # 008cf4; top: 50%; left: 50%; transform: translate (- 50%,-50%) rotate (45deg); z-index: 1;}

Why is the height here 17.6rem?

This is also calculated through the Pythagorean theorem (a ²+ b ²= c ²). Know that the diagonal is the height of the container, 25remdir 25x25x25x25x2, and you can get it.

Set an eye-catching color at the top, where to put the container, and then let's beautify it.

.. border {position: absolute; height: 17.6remr; width: 17.6remr; text-align: center;} .border:: before,.border::after {position: absolute; display: block; width: 100%; height: 2.5remt; color: # fff; background: linear-gradient (to top,#212f4602, # 7499d7);} .border1:: before {content: 'web frontend button group 784783012';} .border1:: after {bottom: 0 Content: 'come with me'; transform: rotate (180deg);} .border2 {transform: rotate (90deg);} .border2:: before {content: 'the front end of learning';} .border2:: after {bottom: 0; content: 'get up'; transform: rotate (180deg);}.

Use two div elements to make a border, adding a linear gradient style to the border

Let's go on to modify the hollowed-out square, where the width and height, which used to be 17.6, was removed due to the addition of border and padding.

Matrix {position: absolute; / * modify width and height * / height: 16.7remm; width: 16.7remm; 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: Width: 16.7rem.text-align: center;}

Enlarge the animation of square text

Here has done the text shadow, zoom has not been realized for the time being, the current zoom will change the original text, so you must re-copy a text, to do, interested can try.

.border:: before,.border::after {... Animation: text-an 1.5s linear infinite;} @ keyframes text-an {0% {text-shadow: 00 # ffffff;} 100% {text-shadow: 0-6rem .4rem # ffffff10;}}

Text button making

Use: before,: after pseudo-class to make trapezoid.

... Confirm .button {position: relative; background: # 3e3a31; width: 6.5remt; 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.43remt; border-style: solid; border-color: # 3e3a31 transparent transparent transparent;} .button:: before {transform: rotate (- 135deg); left:-1.40remr; top:-1.42remt;} .button:: after {transform: rotate (135deg); right:-1.43remr; top:-1.43remr;}

"how to use CSS3 to achieve Arena of Valor matching personnel load page" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.