CSS3实现王者荣耀匹配人员加载页面

玩过王者的应该都熟悉，这个页面的效果。为什么要实现这个效果了？

第一：王者这么火，电竞这么火。
第二：主要还是来学习 CSS3 的线性、径向渐变、旋转、缩放以及动画。

图形解析

1、背景（径向渐变）
2、玩家（player）加载动画（线性渐变）
3、背景镂空旋转正方形
4、正方形文字放大动画
5、文字按钮制作

下面我们按上述步骤实现

背景制作

background: radial-gradient(center, shape size, start-color, …, last-color);

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse

<style>
  .king{
    position: relative;
    height: 25rem;
    width: 100%;
    background: 
      radial-gradient(circle, #ccc, #161d4f 85%);
  }
</style>
<div class="king"></div>
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

玩家加载

模块整体垂直居中，线性渐变。

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

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>

添加峡谷图片，背景线性渐变，旋转。添加边框，然后用 box-shadow看起来发光效果。