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


Posted in HTML / CSS onApril 16, 2019

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

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>

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

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

玩家加载

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

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>

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

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

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

<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实现王者荣耀匹配人员加载页面的方法

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

下面把10个玩家,分2组,放到峡谷图片两侧。

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

这里每组的宽度,运用了 calc() 来计算宽度,(100%-矩形对角线长度)/2。

中间是个边长等于8rem的正方形,所以:对角线长度 = 8rem的平方 x 2 然后再开方。这里矩形对角线长度我们约等于13rem。

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

我们来添加每位player边框加载动画

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

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

主要用到 clip 属性。

clip 属性剪裁绝对定位元素。

当一幅图像的尺寸大于包含它的元素时会发生什么呢?“clip” 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。

唯一合法的形状值是:rect (top, right, bottom, left)

这个属性很好玩儿,有兴趣的可以好好研究一下。

最后我们给两个分组上面加高光效果

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

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

ok,玩家这块我们先修饰到这样,有兴趣的拉取源码继续码。

背景镂空旋转正方形

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

这里的height为什么是17.6rem了?

这里也是计算通过勾股定理(a²+b²=c²)计算出来的啦。知道对角线就是容器的高度25rem,25x25/2再开方就得出了。

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

上方设了个醒目的颜色,把容器放到哪里,然后我们来美化一下它

<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前端扣群 784783012     ';
}
.border1::after{
  bottom: 0;
  content: '     跟 我 一 起     ';
  transform: rotate(180deg);
}
.border2{
  transform: rotate(90deg);
}
.border2::before{
  content: '     学 习 前 端     ';
}
.border2::after{
  bottom: 0;
  content: '     让 你 秀 起 来     ';
  transform: rotate(180deg);
}
</style>
...
<div class="matrix">
  <div class="border border1"></div>
  <div class="border border2"></div>
</div>

用两个div元素来制作边框,边框添加线性渐变样式

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

下面继续修饰一下镂空正方形,这里宽高,之前是17.6,由于加了border和padding,所以去掉。

.matrix{
  position: absolute;
  /* 修改宽高 */
  height: 16.7rem;
  width: 16.7rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 1;
  /* 添加边框,与间距 */
  border: .1rem solid #7499d7;
  padding: .4rem;
}
.border{
  position: absolute;
  /* 修改宽高 */
  height: 16.7rem;
  width: 16.7rem;
  text-align: center;
}

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

正方形文字放大动画

这里就做了文字阴影,缩放暂时没有实现,目前缩放会改变原有文字,所以必须重新copy一份文字,来做,有兴趣的可以去试试。

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

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

文字按钮制作

利用:before、:after伪类制作梯形。

<div class="king">
  ...
  <div class="button">确认</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>

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

本节文章就到此为止吧,还有一些细节的地方,大家可以在练习操作的时候优化。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
sass 常用备忘案例详解
Sep 15 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 #HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 #HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 #HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 #HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 #HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 #HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 #HTML / CSS
You might like
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
PHP文件上传主要代码讲解
2013/09/30 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
详解vue 命名视图
2019/08/14 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
生产班组长岗位职责
2014/01/05 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
2016特色励志班级口号
2015/12/24 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL