玩过王者的应该都熟悉,这个页面的效果。为什么要实现这个效果了?
第一:王者这么火,电竞这么火。
第二:主要还是来学习 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
看起来发光效果。
<style>
...
.center{
position: abso