快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

怎么用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实现王者荣耀匹配人员加载页面

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

玩家加载

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

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

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



  

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

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

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



  
    
  

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

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

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


...

  
    
    
    
    
    
  
  
    
    
    
    
    
  
  

...

这里每组的宽度,运用了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,玩家这块我们先修饰到这样,有兴趣的拉取源码继续码。

背景镂空旋转正方形


  
    ...
  
  

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

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

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

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


...

  
  

用两个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伪类制作梯形。


  ...
  确认

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

“怎么用CSS3实现王者荣耀匹配人员加载页面”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


分享标题:怎么用CSS3实现王者荣耀匹配人员加载页面
标题来源:http://6mz.cn/article/psdphj.html

其他资讯