天天看點
傳回

CSS3線性、徑向漸變、旋轉、縮放、動畫實作王者榮耀比對人員加載頁面

前言

日子總是像從指尖流過的細沙，在不經意間悄然的滑落。轉眼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線性、徑向漸變、旋轉、縮放、動畫實作王者榮耀比對人員加載頁面

玩家加載

子產品整體垂直居中，線性漸變。

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線性、徑向漸變、旋轉、縮放、動畫實作王者榮耀比對人員加載頁面

添加峽谷圖檔，背景線性漸變，旋轉。添加邊框，然後用

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線性、徑向漸變、旋轉、縮放、動畫實作王者榮耀比對人員加載頁面

下面把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: '     w e b 秀     ';
}
.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線性、徑向漸變、旋轉、縮放、動畫實作王者榮耀比對人員加載頁面

本節文章就到此為止吧，篇幅已經很長了。還有很多細節的地方沒有做到，後期繼續講解。

小結

知識點：

1、CSS3線性（linear-gradient）、徑向漸變（radial-gradient）

2、CSS3

clip

屬性（裁剪元素）

3、CSS3元素旋轉（transform: rotate(角度值)）

4、CSS3

text-shadow

文字陰影

源碼示範：源碼示範

源碼位址：示範位址可以直接右鍵另存，純html，可以下載下傳

上一篇: Vue + Element UI：使table元件的td内容可編輯
下一篇: WIN下vscode調試C/C++，從零開始生成helloworld項目