仿写王者荣耀主页代码HTML CSS,CSS3实现王者荣耀匹配人员加载页面的方法

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

CSS3实现王者荣耀匹配人员加载页面的方法-1.png (110.5 KB, 下载次数: 0)

2020-7-22 15:21 上传

第一：王者这么火，电竞这么火。

第二：主要还是来学习 CSS3 的线性、径向渐变、旋转、缩放以及动画。

图形解析

1、背景(径向渐变)

2、玩家(player)加载动画(线性渐变)

3、背景镂空旋转正方形

4、正方形文字放大动画

5、文字按钮制作

下面我们按上述步骤实现

背景制作

background: radial-gradient(center, shape size, start-color, …, last-color);shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse

.king{

position: relative;

height: 25rem;

width: 100%;

background:

radial-gradient(circle, #ccc, #161d4f 85%);

}

CSS3实现王者荣耀匹配人员加载页面的方法-2.jpg (5.77 KB, 下载次数: 0)

2020-7-22 15:21 上传

CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载动画

玩家加载

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

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

direction/angle控制渐变方向/角度。

...

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

}

CSS3实现王者荣耀匹配人员加载页面的方法-3.jpg (6.54 KB, 下载次数: 0)

2020-7-22 15:21 上传

CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载动画

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

...

.center{

position: absolute;

height: 8rem;

width: 8rem;

top: 50%;

left: 50%;

transform:

translate(-50%, -50%) rotate(45deg