真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

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

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

CSS3線性、徑向漸變、旋轉(zhuǎn)、縮放、動畫實現(xiàn)王者榮耀匹配人員加載動畫

添加峽谷圖片，背景線性漸變，旋轉(zhuǎn)。添加邊框，然后用 box-shadow 看起來發(fā)光效果。

CSS3線性、徑向漸變、旋轉(zhuǎn)、縮放、動畫實現(xiàn)王者榮耀匹配人員加載動畫

下面把10個玩家，分2組，放到峽谷圖片兩側(cè)。

...

  
    
    
    
    
    
  
  
    
    
    
    
    
  
  

...

這里每組的寬度，運(yùn)用了 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 屬性剪裁絕對定位元素。

當(dāng)一幅圖像的尺寸大于包含它的元素時會發(fā)生什么呢？“clip” 屬性允許您規(guī)定一個元素的可見尺寸，這樣此元素就會被修剪并顯示為這個形狀。

唯一合法的形狀值是：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，玩家這塊我們先修飾到這樣，有興趣的拉取源碼繼續(xù)碼。

背景鏤空旋轉(zhuǎn)正方形

  
    ...
  
  

這里的height為什么是17.6rem了？

這里也是計算通過勾股定理（a²+b²=c²）計算出來的啦。知道對角線就是容器的高度25rem，25x25/2再開方就得出了。

上方設(shè)了個醒目的顏色，把容器放到哪里，然后我們來美化一下它

...

  
  

用兩個div元素來制作邊框，邊框添加線性漸變樣式

下面繼續(xù)修飾一下鏤空正方形，這里寬高，之前是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;
}

正方形文字放大動畫

這里就做了文字陰影，縮放暫時沒有實現(xiàn)，目前縮放會改變原有文字，所以必須重新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偽類制作梯形。

  ...
  確認(rèn)

關(guān)于使用CSS3怎么實現(xiàn)一個王者榮耀匹配人員加載頁面就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。