CSS3: a way to match the glory of the king to load the page

Time:2020-2-11

Those who have played king should be familiar with the effect of this page. Why do you want to achieve this effect?

First: the king is so hot, the electric competition is so hot.

Second: mainly to learn CSS3 linear, radial gradient, rotation, scaling and animation.

Graph parsing

1. Background (radial gradient)

2. Player loads animation (linear gradient)

3. Background cutout rotating square

4. Square text zoom in animation

5. Text button making

Let’s follow the steps above

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. Where circle represents a circle and ellipse represents an ellipse. The default 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 glory matching people loading animation

Player loading

The whole module is vertically centered with linear gradient.


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

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


<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 glory matching people loading animation

Add Canyon image, background linear gradient, rotation. Add a border and use thebox-shadowLooks luminous.


<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 glory matching people loading animation

Next, put 10 players in 2 groups on both sides of the canyon picture.


<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 usedcalc()To calculate the width, (100% – Rectangular diagonal length) / 2.

In the middle is a square with side length equal to 8rem, so: diagonal length = square of 8rem x 2 and then square. Here we have a rectangular diagonal length of about 13 rem.

Let’s add each player border 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 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);
  }
}

Mainly usedclipAttribute.

The clip attribute trims the absolute positioning element.

What happens when the size of 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 it is trimmed and displayed as the shape.

The only valid shape value is: Rect (top, right, bottom, left)

This attribute is very interesting. If you are interested in it, you can study it well.

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: 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 decorate the player first, and continue to pull the source code with interest.

Background cutout 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.6 REM?

This is also calculated by Pythagorean theorem (a 2 + B 2 = C 2). Know that the diagonal is the height of the container 25rem, 25×25 / 2 square to get.

There’s a striking color on 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 buckle group 784783012';
}
.border1::after{
  bottom: 0;
  Content: 'with me';
  transform: rotate(180deg);
}
.border2{
  transform: rotate(90deg);
}
.border2::before{
  Content: 'learning front end';
}
.border2::after{
  bottom: 0;
  Content: 'let you show up';
  transform: rotate(180deg);
}
</style>
...
<div class="matrix">
  <div class="border border1"></div>
  <div class="border border2"></div>
</div>

Make a border with two div elements, and add a linear gradient style to the border

Let’s continue to decorate the hollow square. It’s wide and high. It was 17.6 before. Because of the border and padding, it was removed.

.matrix{
  position: absolute;
  /*Change width and height*/
  height: 16.7rem;
  width: 16.7rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 1;
  /*Add border, and spacing*/
  border: .1rem solid #7499d7;
  padding: .4rem;
}
.border{
  position: absolute;
  /*Change width and height*/
  height: 16.7rem;
  width: 16.7rem;
  text-align: center;
}

 

Square text zoom in animation

The text shadow is made here, and the zoom is not realized temporarily. At present, the zoom will change the original text, so you must copy a copy of the text again to do it. You can try it if you are interested.


.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 making

Use: before,: after pseudo class to make 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 so far, there are some details, you can practice the operation of optimization.

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.