符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
怎么用CSS3实现王者荣耀匹配人员加载页面
本篇内容介绍了“怎么用CSS3实现王者荣耀匹配人员加载页面”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
10年积累的成都网站设计、成都网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有海宁免费网站建设让你可以放心的选择与我们合作。
图形解析
1、背景（径向渐变）
2、玩家（player）加载动画（线性渐变）
3、背景镂空旋转正方形
4、正方形文字放大动画
5、文字按钮制作
下面我们按上述步骤实现
背景制作
background: radial-gradient(center, shape size, start-color, …, last-color);
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载动画
玩家加载
模块整体垂直居中，线性渐变。
background: linear-gradient(direction/angle, color-stop1, color-stop2, …);
direction/angle控制渐变方向/角度。
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载动画
添加峡谷图片，背景线性渐变，旋转。添加边框，然后用 box-shadow看起来发光效果。
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载动画
下面把10个玩家，分2组，放到峡谷图片两侧。
...
...
这里每组的宽度，运用了calc()来计算宽度，(100%-矩形对角线长度)/2。
中间是个边长等于8rem的正方形，所以：对角线长度 = 8rem的平方 x 2 然后再开方。这里矩形对角线长度我们约等于13rem。
我们来添加每位player边框加载动画
.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;
}
ok，玩家这块我们先修饰到这样，有兴趣的拉取源码继续码。
背景镂空旋转正方形
...
这里的height为什么是17.6rem了？
这里也是计算通过勾股定理（a²+b²=c²）计算出来的啦。知道对角线就是容器的高度25rem，25x25/2再开方就得出了。
上方设了个醒目的颜色，把容器放到哪里，然后我们来美化一下它
...
用两个div元素来制作边框，边框添加线性渐变样式
下面继续修饰一下镂空正方形，这里宽高，之前是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;
}
正方形文字放大动画
这里就做了文字阴影，缩放暂时没有实现，目前缩放会改变原有文字，所以必须重新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;
}
}
文字按钮制作
利用:before、:after伪类制作梯形。
...
确认
“怎么用CSS3实现王者荣耀匹配人员加载页面”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
本文名称：怎么用CSS3实现王者荣耀匹配人员加载页面
网址分享：http://bjjierui.cn/article/psdphj.html
