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

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

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

图形解析

1、背景（径向渐变）

2、玩家（player）加载动画（线性渐变） 3、背景镂空旋转正方形 4、正方形文字放大动画 5、文字按钮制作

下面我们按上述步骤实现

背景制作

background: radial-gradient(center, shape size, start-color, …, last-color);

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse

玩家加载

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

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

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

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

下面把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伪类制作梯形。

    
       ...  
     
      确认
      
     
    

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

有句话叫做“方法不对，努力白费”所有的前端大神都有自己的学习方法，而学web前端的学习也基本一致，而对于一个什么都不懂的初学者，根本不会知道该怎么学，这也是造成失败的最直接原因。所以学web前端一定要有人指点。如果你处在迷茫期，找不到方向。可以加入我们的前端学习交流qun： 784783012 。有任何不明白的东西随时来问我。点击：

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/69901074/viewspace-2640759/，如需转载，请注明出处，否则将追究法律责任。