您现在的位置是：网站首页> 编程资料编程资料
CSS3实现王者荣耀匹配人员加载页面的方法CSS动态条形加载条效果的示例代码实现点击按钮后CSS加载效果的实现如何只在IE上加载CSS样式表
2021-09-04
902人已围观
简介 这篇文章主要介绍了CSS3实现王者荣耀匹配人员加载页面的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
玩过王者的应该都熟悉，这个页面的效果。为什么要实现这个效果了？
第一：王者这么火，电竞这么火。
第二：主要还是来学习 CSS3 的线性、径向渐变、旋转、缩放以及动画。
图形解析
1、背景（径向渐变）
2、玩家（player）加载动画（线性渐变）
3、背景镂空旋转正方形
4、正方形文字放大动画
5、文字按钮制作
下面我们按上述步骤实现
背景制作
background: radial-gradient(center, shape size, start-color, …, last-color);
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载动画
玩家加载
模块整体垂直居中，线性渐变。
background: linear-gradient(direction/angle, color-stop1, color-stop2, …);
direction/angle控制渐变方向/角度。
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载动画
添加峡谷图片，背景线性渐变，旋转。添加边框，然后用 box-shadow 看起来发光效果。
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载动画
下面把10个玩家，分2组，放到峡谷图片两侧。
......
这里每组的宽度，运用了 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，玩家这块我们先修饰到这样，有兴趣的拉取源码继续码。
背景镂空旋转正方形
...
这里的height为什么是17.6rem了？
这里也是计算通过勾股定理（a²+b²=c²）计算出来的啦。知道对角线就是容器的高度25rem，25x25/2再开方就得出了。
上方设了个醒目的颜色，把容器放到哪里，然后我们来美化一下它
...
用两个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伪类制作梯形。
...
本节文章就到此为止吧，还有一些细节的地方，大家可以在练习操作的时候优化。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
相关内容
- 浅谈css阻断合并及其他影响正确理解CSS中的margin合并的用法css(html)背景图优化合并技巧详解CSS(html)背景图优化合并深入探讨谈谈CSS的边距合并之我的理解CSS的样式合并与模块化提高代码执行效率CSS外边距合并代码什么是CSS Sprites（图片合并）技术 图文介绍CSS Sprites图片合并代码多个css、js文件自动合并、压缩在线工具css盒子模型 css margin 外边框合并
- css高级应用三种方法实现多行省略的示例代码css多行文本溢出时出现省略号的示例纯CSS定制文本省略的方法大全CSS实现单行、多行文本溢出显示省略号的实现方法通过纯CSS样式实现DIV元素中多行文本超长自动省略号
- CSS3实现王者匹配时的粒子动画效果CSS3实现粒子旋转伸缩加载动画CSS3实现大小不一的粒子旋转加载动画
- CSS实现菜单按钮动画CSS3 水墨风格背景动画按钮基于CSS 属性实现按钮悬停边框和背景动画集合css实现抖音订阅按钮动画效果
- CSS3解析抖音LOGO制作的方法步骤用CSS3打造HTML5的Logo(实现代码)CSS3 绘制BMW logo实的现代码css3简单练习实现遨游浏览器logo的绘制纯css3无js实现的Android Logo(有简单动画)css3绘制天猫logo实现代码
- CSS奇技淫巧之实现波浪效果CSS3径向渐变radial-gradient实现波浪边框和内倒角的方法使用css实现圆形波浪效果图 css3实现波纹特效、H5实现动态波浪效果纯CSS实现波浪移动效果的示例CSS3实现文字波浪线效果示例代码
- 解析CSS中的Grid布局完全指南10分钟理解CSS3 Grid布局CSS Grid 网格布局全解析5分钟教你学会 CSS Grid 布局CSS Grid布局教程之网格单元格布局CSS Grid布局教程之浏览器开启CSS Grid Layout汇总CSS Grid布局教程之什么是网格布局使用CSS Grid布局实现网格的流动
- 使用CSS Transitions实现圆形悬停效果的示例代码深入探究CSS中Animations和Transitions的工作原理
- 4种灵活的Scss编译输出风格整理sass(scss）的安装与使用教程SCSS移动端页面遮罩层效果的实现及常见问题解决LESSCSS让CSS使用起来更加灵活成就CSS动态化动态的样式表lesscss:简单学习lesscss语法
- CSS3 3D酷炫立方体变换动画的实现利用CSS3制作简单的3d半透明立方体图片展示HTML5+CSS3 诱人的实例：3D立方体旋转动画实例CSS3 3D立方体效果示例－transform也不过如此css3 transform及原生js实现鼠标拖动3D立方体旋转一款利用html5和css3实现的3D立方体旋转效果教程 css3 transform 3d 使用css3创建动态3d立方体(html5实践)
