经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS3 » 查看文章
CSS3实现王者荣耀匹配人员加载页面的方法_css3_CSS
来源：jb51　　时间：2019/4/17 8:49:09　　对本文有异议

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

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

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

图形解析

1、背景（径向渐变）

2、玩家（player）加载动画（线性渐变）

3、背景镂空旋转正方形

4、正方形文字放大动画

5、文字按钮制作

下面我们按上述步骤实现

背景制作

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

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

  1. <style>
  2.   .king{
  3.     position: relative;
  4.     height: 25rem;
  5.     width: 100%;
  6.     background: 
  7.       radial-gradient(circle, #ccc, #161d4f 85%);
  8.   }
  9. </style>
  10. <div class="king"></div>

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

玩家加载

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

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

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

  1. <style>
  2. ...
  3. .player-layout{
  4.   position: relative;
  5.   height: 8rem;
  6.   width: 100%;
  7.   background: 
  8.     linear-gradient(to right, #212f46, #212f4670, #212f46);
  9.   top: 50%;
  10.   transform: translate(0,-50%);
  11.   z-index: 10;
  12. }
  13. </style>
  14. <div class="king">
  15.   <div class="player-layout"></div>
  16. </div>

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

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

  1. <style>
  2. ...
  3. .center{
  4.   position: absolute;
  5.   height: 8rem;
  6.   width: 8rem;
  7.   top: 50%;
  8.   left: 50%;
  9.   transform: 
  10.     translate(-50%, -50%) rotate(45deg);
  11.   background: 
  12.     linear-gradient(90deg, #212f46, #5b99ff);
  13.   border: .3rem solid #55a9ef;
  14.   box-shadow: 0px 0px .8rem #88c0f0;
  15.   padding: .2rem;
  16. }
  17. .center img{
  18.   width: 100%;
  19.   height: 100%;
  20. }
  21. </style>
  22. <div class="king">
  23.   <div class="player-layout">
  24.     <div class="center"><img src="../images/123123.jpg"></div>
  25.   </div>
  26. </div>

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

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

  1. <style>
  2. ...
  3. ...
  4. .group{
  5.   position: relative;
  6.   width: calc((100% - 13rem)/2);
  7.   top: 50%;
  8.   transform: translate(0, -50%);
  9. }
  10. .group1{
  11.   text-align: right;
  12.   float: left;
  13. }
  14. .group2{
  15.   text-align: left;
  16.   float: right;
  17. }
  18. .palyer{
  19.   width: 4rem;
  20.   height: 4rem;
  21.   display: inline-block;
  22.   background: url('../images/123123.jpg');
  23.   background-size: cover;
  24.   border: .3rem solid #55a9ef;
  25.   box-shadow: 0px 0px .8rem #88c0f0;
  26. }  
  27. </style>
  28. ...
  29. <div class="player-layout">
  30.   <div class="group group1">
  31.     <div class="player1 palyer"></div>
  32.     <div class="player2 palyer"></div>
  33.     <div class="player3 palyer"></div>
  34.     <div class="player4 palyer"></div>
  35.     <div class="player5 palyer"></div>
  36.   </div>
  37.   <div class="group group2">
  38.     <div class="player6 palyer"></div>
  39.     <div class="player7 palyer"></div>
  40.     <div class="player8 palyer"></div>
  41.     <div class="player9 palyer"></div>
  42.     <div class="player10 palyer"></div>
  43.   </div>
  44.   <div class="center"><img src="../images/123123.jpg"></div>
  45. </div>
  46. ...

这里每组的宽度，运用了 calc() 来计算宽度，(100%-矩形对角线长度)/2。

中间是个边长等于8rem的正方形，所以：对角线长度 = 8rem的平方 x 2 然后再开方。这里矩形对角线长度我们约等于13rem。

我们来添加每位player边框加载动画

  1. .player{
  2.   position: relative;
  3.   ...
  4.   ...
  5.   color: #fff;
  6. }
  7. .player::before,
  8. .player::after {
  9.   position: absolute;
  10.   content: '';
  11.   top: 0;
  12.   bottom: 0;
  13.   left: 0;
  14.   right: 0;
  15.   margin: -8%;
  16.   box-shadow: inset 0 0 0 .3rem;
  17.   animation: clipMe 6s linear infinite;
  18. }
  19. .player::before {
  20.   animation-delay: -3s;
  21. }
  22. @keyframes clipMe {
  23.   0%,
  24.   100% {
  25.     clip: rect(0, 4.8rem, 4.8rem, 4.3rem);
  26.   }
  27.   25% {
  28.     clip: rect(0px, 4.8rem, .3rem, 0);
  29.   }
  30.   50% {
  31.     clip: rect(0, .3rem, 4.8rem, 0);
  32.   }
  33.   75% {
  34.     clip: rect(4.3rem, 4.8rem, 4.8rem, 0rem);
  35.   }
  36. }

主要用到 clip 属性。

clip 属性剪裁绝对定位元素。

当一幅图像的尺寸大于包含它的元素时会发生什么呢？“clip” 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

唯一合法的形状值是：rect (top, right, bottom, left)

这个属性很好玩儿，有兴趣的可以好好研究一下。

最后我们给两个分组上面加高光效果

  1. .group::before, .group::after{
  2.   position: absolute;
  3.   content: '';
  4.   background: linear-gradient(to right,#212f4602, #7499d7, #212f4602);
  5.   height: .3rem;
  6.   width: 10rem;
  7. }
  8. .group::before{
  9.   top: -1.5rem;
  10. }
  11. .group::after{
  12.   bottom: -1.5rem;
  13. }
  14. .group1::before{
  15.   right: 0;
  16. }
  17. .group1::after{
  18.   right: 5rem;
  19. }
  20. .group2::after{
  21.   left: 5rem;
  22. }

ok，玩家这块我们先修饰到这样，有兴趣的拉取源码继续码。

背景镂空旋转正方形

  1. <div class="king">
  2.   <div class="player-layout">
  3.     ...
  4.   </div>
  5.   <div class="matrix"></div>
  6. </div>
  7. <style>
  8. .matrix{
  9.   position: absolute;
  10.   height: 17.6rem;
  11.   width: 17.6rem;
  12.   background: #008cf4;
  13.   top: 50%;
  14.   left: 50%;
  15.   transform: 
  16.     translate(-50%, -50%) rotate(45deg);
  17.   z-index: 1;
  18. }
  19. </style>

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

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

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

  1. <style>
  2. ...
  3. .border{
  4.   position: absolute;
  5.   height: 17.6rem;
  6.   width: 17.6rem;
  7.   text-align: center;
  8. }
  9. .border::before,.border::after{
  10.   position: absolute;
  11.   display: block;
  12.   width: 100%;
  13.   height: 2.5rem;
  14.   color: #fff;
  15.   background: 
  16.     linear-gradient(to top,#212f4602, #7499d7);
  17. }
  18. .border1::before{
  19.   content: '     web前端扣群 784783012     ';
  20. }
  21. .border1::after{
  22.   bottom: 0;
  23.   content: '     跟 我 一 起     ';
  24.   transform: rotate(180deg);
  25. }
  26. .border2{
  27.   transform: rotate(90deg);
  28. }
  29. .border2::before{
  30.   content: '     学 习 前 端     ';
  31. }
  32. .border2::after{
  33.   bottom: 0;
  34.   content: '     让 你 秀 起 来     ';
  35.   transform: rotate(180deg);
  36. }
  37. </style>
  38. ...
  39. <div class="matrix">
  40.   <div class="border border1"></div>
  41.   <div class="border border2"></div>
  42. </div>

用两个div元素来制作边框，边框添加线性渐变样式

下面继续修饰一下镂空正方形，这里宽高，之前是17.6，由于加了border和padding，所以去掉。

  1. .matrix{
  2.   position: absolute;
  3.   /* 修改宽高 */
  4.   height: 16.7rem;
  5.   width: 16.7rem;
  6.   top: 50%;
  7.   left: 50%;
  8.   transform: translate(-50%, -50%) rotate(45deg);
  9.   z-index: 1;
  10.   /* 添加边框，与间距 */
  11.   border: .1rem solid #7499d7;
  12.   padding: .4rem;
  13. }
  14. .border{
  15.   position: absolute;
  16.   /* 修改宽高 */
  17.   height: 16.7rem;
  18.   width: 16.7rem;
  19.   text-align: center;
  20. }

 

正方形文字放大动画

这里就做了文字阴影，缩放暂时没有实现，目前缩放会改变原有文字，所以必须重新copy一份文字，来做，有兴趣的可以去试试。

  1. .border::before,.border::after{
  2.   ...
  3.   animation: text-an 1.5s linear infinite;
  4. }
  5. @keyframes text-an {
  6.   0%{
  7.     text-shadow: 0 0 0 #ffffff;
  8.   }
  9.   100% {
  10.     text-shadow: 0 -6rem .4rem #ffffff10;
  11.   }
  12. }

 

文字按钮制作

利用:before、:after伪类制作梯形。

  1. <div class="king">
  2.   ...
  3.   <div class="button">确认</div>
  4. </div>
  5. <style>
  6. .button{
  7.   position: relative;
  8.   background: #3e3a31;
  9.   width: 6.5rem;
  10.   height: 2rem;
  11.   line-height: 2rem;
  12.   color: #fff;
  13.   top: 50%;
  14.   left: 50%;
  15.   transform: translate(-50%, -50%);
  16.   z-index: 11;
  17.   text-align: center;
  18.   cursor: pointer;
  19. }
  20. .button::before,.button::after{
  21.   position: absolute;
  22.   content: '';
  23.   display: inline-block;
  24.   width: 0; 
  25.   height: 0;
  26.   border-width: 1.43rem;
  27.   border-style: solid;
  28.   border-color:
  29.     #3e3a31 
  30.     transparent 
  31.     transparent  
  32.     transparent;
  33. }
  34. .button::before{
  35.   transform: rotate(-135deg);
  36.   left: -1.40rem;
  37.   top: -1.42rem;
  38. }
  39. .button::after{
  40.   transform: rotate(135deg);
  41.   right: -1.43rem;
  42.   top: -1.43rem;
  43. }
  44. </style>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS3热门文章

  • CSS3选择器新增问题的实现_css3_CSS
  • CSS3实现列表无限滚动/轮播效果_css3_CSS
  • CSS3 Tab动画实例之背景切换动态效果_css3_CSS
  • Github上流行的CSS3动画效果库 animate.css
  • CSS3通过var()和calc()函数实现动画特效_css3_CSS
  • CSS3动画之DIY Loading动画
  • CSS中这个函数你会用吗？垂直居中都可以设置
  • 巧用 CSS3的webkit-box-reflect 倒影实现各类动效_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3过渡旋转透视2d3d动画等效果的实例代码_css3_CSS

    • CSS3推荐文章

  • 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
  • 可视化学习：如何生成简单动画让图形动起来
  • 【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
  • 【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原
  • 【动画进阶】神奇的 3D 磨砂玻璃透视效果
  • 快速构建页面结构的 3D Visualization
  • 详解CSS3.0(Cascading Style Sheet) 层叠级联样式表_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3实现的侧滑菜单_css3_CSS
  • CSS3常见动画的实现方式_css3_CSS

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号