2023年6月21日发(作者：)
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配⼈员加载页⾯前⾔⽇⼦总是像从指尖流过的细沙，在不经意间悄然的滑落。转眼2019年第⼀季度已经过去了，提前祝⼤家愚⼈节快乐，当⼼被⼈愚弄哦（就算被愚弄也不要⽣⽓啦）。先来看看今天要实现的效果原图：玩过王者的应该都熟悉，这个页⾯的效果。为什么要实现这个效果了？第⼀：王者这么⽕，电竞这么⽕。第⼆：主要还是来学习 CSS3 的线性、、旋转、缩放以及动画。图形解析1、背景（径向渐变）2、玩家（player）加载动画（线性渐变）3、背景镂空旋转正⽅形4、正⽅形⽂字放⼤动画5、⽂字按钮制作下⾯我们按上述步骤实现背景制作background: radial-gradient(center, shape size, start-color, ..., last-color);shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表⽰圆形，ellipse 表⽰椭圆形。默认值是 ellipse
HTMLCopy玩家加载模块整体垂直居中，线性渐变。background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);direction/angle控制渐变⽅向/⾓度。
HTMLCopy添加峡⾕图⽚，背景线性渐变，旋转。添加边框，然后⽤ box-shadow看起来发光效果。
HTMLCopy转存失败下⾯把10个玩家，分2组，放到峡⾕图⽚两侧。...
...HTMLCopy这⾥每组的宽度，运⽤了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); }}CSSCopy主要⽤到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;}CSSCopyok，玩家这块我们先修饰到这样，有兴趣的拉取源码继续码。背景镂空旋转正⽅形
HTMLCopy这⾥的height为什么是17.6rem了？这⾥也是计算通过勾股定理（a²+b²=c²）计算出来的啦。知道对⾓线就是容器的⾼度25rem，25x25/2再开⽅就得出了。上⽅设了个醒⽬的颜⾊，把容器放到哪⾥，然后我们来美化⼀下它...
HTMLCopy⽤两个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;}CSSCopy正⽅形⽂字放⼤动画这⾥就做了⽂字阴影，缩放暂时没有实现，⽬前缩放会改变原有⽂字，所以必须重新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; }}CSSCopy⽂字按钮制作利⽤:before、:after伪类制作梯形。
HTMLCopy本节⽂章就到此为⽌吧，篇幅已经很长了。还有很多细节的地⽅没有做到，后期继续讲解。⼩结知识点：1、（linear-gradient）、径向渐变（radial-gradient）2、CSS3 clip 属性（裁剪元素）3、CSS3元素旋转（transform: rotate(⾓度值)）4、CSS3 text-shadow⽂字阴影
2023年6月21日发(作者：)
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配⼈员加载页⾯前⾔⽇⼦总是像从指尖流过的细沙，在不经意间悄然的滑落。转眼2019年第⼀季度已经过去了，提前祝⼤家愚⼈节快乐，当⼼被⼈愚弄哦（就算被愚弄也不要⽣⽓啦）。先来看看今天要实现的效果原图：玩过王者的应该都熟悉，这个页⾯的效果。为什么要实现这个效果了？第⼀：王者这么⽕，电竞这么⽕。第⼆：主要还是来学习 CSS3 的线性、、旋转、缩放以及动画。图形解析1、背景（径向渐变）2、玩家（player）加载动画（线性渐变）3、背景镂空旋转正⽅形4、正⽅形⽂字放⼤动画5、⽂字按钮制作下⾯我们按上述步骤实现背景制作background: radial-gradient(center, shape size, start-color, ..., last-color);shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表⽰圆形，ellipse 表⽰椭圆形。默认值是 ellipse
HTMLCopy玩家加载模块整体垂直居中，线性渐变。background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);direction/angle控制渐变⽅向/⾓度。
HTMLCopy添加峡⾕图⽚，背景线性渐变，旋转。添加边框，然后⽤ box-shadow看起来发光效果。
HTMLCopy转存失败下⾯把10个玩家，分2组，放到峡⾕图⽚两侧。...
...HTMLCopy这⾥每组的宽度，运⽤了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); }}CSSCopy主要⽤到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;}CSSCopyok，玩家这块我们先修饰到这样，有兴趣的拉取源码继续码。背景镂空旋转正⽅形
HTMLCopy这⾥的height为什么是17.6rem了？这⾥也是计算通过勾股定理（a²+b²=c²）计算出来的啦。知道对⾓线就是容器的⾼度25rem，25x25/2再开⽅就得出了。上⽅设了个醒⽬的颜⾊，把容器放到哪⾥，然后我们来美化⼀下它...
HTMLCopy⽤两个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;}CSSCopy正⽅形⽂字放⼤动画这⾥就做了⽂字阴影，缩放暂时没有实现，⽬前缩放会改变原有⽂字，所以必须重新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; }}CSSCopy⽂字按钮制作利⽤:before、:after伪类制作梯形。
HTMLCopy本节⽂章就到此为⽌吧，篇幅已经很长了。还有很多细节的地⽅没有做到，后期继续讲解。⼩结知识点：1、（linear-gradient）、径向渐变（radial-gradient）2、CSS3 clip 属性（裁剪元素）3、CSS3元素旋转（transform: rotate(⾓度值)）4、CSS3 text-shadow⽂字阴影
发布评论