龙空技术网

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

web秀 1050

前言:

现时姐妹们对“css3渐变在线生成”都比较关心,看官们都想要了解一些“css3渐变在线生成”的相关知识。那么小编在网上网罗了一些对于“css3渐变在线生成””的相关知识,希望朋友们能喜欢,朋友们快快来学习一下吧!

点击右上方红色按钮关注“web秀”,让你真正秀起来

前言

日子总是像从指尖流过的细沙,在不经意间悄然的滑落。转眼2019年第一季度已经过去了,提前祝大家愚人节快乐,当心被人愚弄哦(就算被愚弄也不要生气啦)。

先来看看今天要实现的效果原图:

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

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

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

图形解析

1、背景(径向渐变)

2、玩家(player)加载动画(线性渐变)

3、背景镂空旋转正方形

4、正方形文字放大动画

5、文字按钮制作

下面我们按上述步骤实现

背景制作

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

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

<style>  </style> <div class="king"></div>
玩家加载

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

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

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

<style> </style> <div class="king">  <div class="player-layout"></div> </div>

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

<style> </style> <div class="king">  <div class="player-layout">  <div class="center"><img src="../images/123123.jpg"></div>  </div> </div>

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

<style> </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: -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,玩家这块我们先修饰到这样,有兴趣的拉取源码继续码。

背景镂空旋转正方形

<div class="king">  <div class="player-layout">  ...  </div>  <div class="matrix"></div> </div> <style> </style>

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

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

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

<style> </style> ... <div class="matrix">  <div class="border border1"></div>  <div class="border border2"></div> </div>

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

<div class="king">  ...  <div class="button">确认</div> </div> <style> </style>

本节文章就到此为止吧,篇幅已经很长了。还有很多细节的地方没有做到,后期继续讲解。

小结

知识点:

1、CSS3线性(linear-gradient)、径向渐变(radial-gradient)

2、CSS3 clip 属性(裁剪元素)

3、CSS3元素旋转(transform: rotate(角度值))

4、CSS3 text-shadow文字阴影

公告

喜欢小编的点击关注,了解更多知识!

源码地址,可以点击下方“了解更多”获取!

标签: #css3渐变在线生成