CSS3完成王者荣誉配对人员载入网页页面的方式

日期:2021-03-01 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

玩过王者的应当都熟习,这个网页页面的实际效果。为何要完成这个实际效果了?

第1:王者这么火,电竞这么火。

第2:关键還是来学习培训 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,⑸0%);
  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(⑸0%, ⑸0%) 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, ⑸0%);
}
.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。

大家来加上每位player边框载入动漫

.player{
  position: relative;
  ...
  ...
  color: #fff;
}
.player::before,
.player::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: ⑻%;
  box-shadow: inset 0 0 0 .3rem;
  animation: clipMe 6s linear infinite;
}
.player::before {
  animation-delay: ⑶s;
}
@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 特性裁剪肯定精准定位元素。

当1幅图象的规格超过包括它的元素时会产生甚么呢?“clip” 特性容许您要求1个元素的可见规格,这样此元素就会被修剪并显示信息为这个样子。

唯1合理合法的样子值是:rect (top, right, bottom, left)

这个特性很好玩儿,有兴趣爱好的能够好好科学研究1下。

最终大家给两个排序上面加高光实际效果

.group::before, .group::after{
  position: absolute;
  content: '';
  background: linear-gradient(to right,#212f4602, #7499d7, #212f4602);
  height: .3rem;
  width: 10rem;
}
.group::before{
  top: ⑴.5rem;
}
.group::after{
  bottom: ⑴.5rem;
}
.group1::before{
  right: 0;
}
.group1::after{
  right: 5rem;
}
.group2::after{
  left: 5rem;
}

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(⑸0%, ⑸0%) rotate(45deg);
  z-index: 1;
}
</style>

这里的height为何是17.6rem了?

这里也是测算根据勾股定理(a²+b²=c²)测算出来的啦。了解对角线便是器皿的高宽比25rem,25x25/2再开方就得出了。

上方设了个醒目地色调,把器皿放到哪里,随后大家来清理1下它

<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: '     web前端开发扣群 784783012     ';
}
.border1::after{
  bottom: 0;
  content: '     跟 我 1 起     ';
  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元向来制做边框,边框加上线形渐变色款式

下面再次装饰1下镂空正方形,这里宽高,以前是17.6,因为加了border和padding,因此去掉。

.matrix{
  position: absolute;
  /* 改动宽高 */
  height: 16.7rem;
  width: 16.7rem;
  top: 50%;
  left: 50%;
  transform: translate(⑸0%, ⑸0%) rotate(45deg);
  z-index: 1;
  /* 加上边框,与间隔 */
  border: .1rem solid #7499d7;
  padding: .4rem;
}
.border{
  position: absolute;
  /* 改动宽高 */
  height: 16.7rem;
  width: 16.7rem;
  text-align: center;
}

 

正方形文本变大动漫

这里就做了文本黑影,放缩临时沒有完成,现阶段放缩会更改原来文本,因此务必再次copy1份文本,来做,有兴趣爱好的能够去试试。

.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 ⑹rem .4rem #ffffff10;
  }
}

 

文本按钮制做

运用: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(⑸0%, ⑸0%);
  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(⑴35deg);
  left: ⑴.40rem;
  top: ⑴.42rem;
}
.button::after{
  transform: rotate(135deg);
  right: ⑴.43rem;
  top: ⑴.43rem;
}
</style>

本节文章内容就到此为止吧,也有1些细节的地区,大伙儿能够在训练实际操作的情况下提升。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:css简易动漫之transition特性详解 返回下一篇:没有了