当前位置: 首页 > Web前端 > CSS

CSS3实现王者荣耀匹配人员加载页面

时间:2023-03-30 23:36:32 CSS

玩过王者荣耀的应该对这个页面的效果不陌生。为什么要达到这样的效果?第一:王者这么火,电竞这么火。第二:主要学习CSS3线性、径向渐变、旋转、缩放和动画。图解分析1.背景(径向渐变)2.播放器(player)加载动画(线性渐变)3.背景镂空旋转正方形4.正方形文字放大动画5.文字按钮制作下面我们按照以上步骤来实现后台制作背景:radial-gradient(center,shapesize,start-color,…,last-color);形状参数定义形状。它可以是值圆或椭圆。其中circle代表圆形,ellipse代表椭圆。默认值为ellipse

播放器加载模块垂直居中,线性渐变。背景:线性渐变(方向/角度,color-stop1,color-stop2,...);direction/angle控制渐变方向/角度。<样式>....播放器布局{位置:相对;高度:8rem;宽度:100%;背景:线性渐变(向右,#212f46,#212f4670,#212f46);顶部:50%;转换:翻译(0,-50%);z-index:10;}
添加峡谷图片,背景线性渐变,旋转。添加一个边框,然后使用box-shadow看起来发光。
接下来,将10名玩家分成2组,分别放置在峡谷图片的两侧。......这里每组的宽度是用calc()计算宽度的,(100%-矩形对角线长度)/2是中间边长等于8rem的正方形,所以:对角线length=8remx2的平方然后开平方。这里矩形的对角线长度约等于13rem。我们给每个player添加边框loadinganimation.player{position:relative;......color:#fff;}.player::before,.player::after{position:absolute;content:'';top:0;bottom:0;left:0;right:0;margin:-8%;box-shadow:inset000.3rem;animation:clipMe6slinearinfinite;}.player::before{animation-delay:-3s;}@keyframesclipMe{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);}}剪辑属性为primaril你用过。clip属性剪辑绝对定位的元素。当图像大于包含元素时会发生什么?“clip”属性允许您指定元素的可见大小,以便元素将被剪裁并显示为该形状。唯一合法的形状值是:rect(top,right,bottom,left)。这个属性很有意思,有兴趣的可以仔细研究一下。最后我们给这两个group加上高亮效果。group::before,.group::after{position:absolute;内容:'';背景:线性渐变(向右,#212f4602,#7499d7,#212f4602);高度:.3rem;宽度:10rem;}.group::before{top:-1.5rem;}.group::after{bottom:-1.5rem;}.group1::before{right:0;}.group1::after{right:5rem;}.group2::after{left:5rem;}ok,我们先把播放器修改到这里,有兴趣的拉取源码继续代码。背景镂空旋转方块...为什么这里的高度是17.6rem?这也是通过勾股定理(a2+b2=c2)计算得出的。知道对角线就是容器的高度25rem,那么就可以得到25x25/2的平方根。上面设置醒目的颜色,放容器的地方,然后美化一下.../div>用两个div元素做一个边框,给边框加上线性渐变样式继续修改镂空正方形。这里的宽高之前是17.6。由于添加了边框和填充,因此将它们移除。.matrix{位置:绝对;/*修改宽高*/height:16.7rem;宽度:16.7rem;顶部:50%;左:50%;变换:平移(-50%,-50%)旋转(45deg);z-索引:1;/*添加边框和间距*/border:.1remsolid#7499d7;填充:.4rem;}.border{位置:绝对;/*修改宽高*/height:16.7rem;宽度:16.7rem;text-align:center;}方块文字放大动画这里是文字阴影,缩放还没有实现,目前缩放会改变原来的文字,所以你必须复制一个新的文字来做,如果你是有兴趣可以去试试。.border::before,.border::after{...animation:text-an1.5slinearinfinite;}@keyframestext-an{0%{text-shadow:000#ffffff;}100%{text-shadow:0-6rem.4rem#ffffff10;}}文本按钮使用:before和:after伪类制作梯形。...确认这一段文章就到此为止了,还有一些细节,大家在练习操作的时候可以优化一下。有句话叫“方法不对,功夫白费”。所有的前端高手都有自己的学习方法,学习web前端的学习方式基本大同小异,但是对于一个什么都不会的初学者来说,根本不知道怎么学,这也是最直接的失败原因。所以学习web前端一定要有人指导。如果你处于迷茫时期,你就找不到自己的路。可以加入我们的前端学习交流群:784783012,有不懂的可以随时问我。点击:前端学习圈