CSS3实现王者荣耀匹配人员加载页面的方法
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
玩过王者的应该都熟悉,这个页面的效果。为什么要实现这个效果了?
第一:王者这么火,电竞这么火。
第二:主要还是来学习 CSS3 的线性、径向渐变、旋转、缩放以及动画。
图形解析
1、背景(径向渐变)
2、玩家(player)加载动画(线性渐变)
3、背景镂空旋转正方形
4、正方形文字放大动画
5、文字按钮制作
下面我们按上述步骤实现
背景制作
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse
1 2 3 4 5 6 7 8 9 10 | < style > .king{ position: relative; height: 25rem; width: 100%; background: radial-gradient(circle, #ccc, #161d4f 85%); } </ style > < div class = "king" ></ div > |
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载动画
玩家加载
模块整体垂直居中,线性渐变。
direction/angle控制渐变方向/角度。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < style > ... .player-layout{ position: relative; height: 8rem; width: 100%; background: linear-gradient(to right, #212f46, #212f4670, #212f46); top: 50%; transform: translate(0,-50%); z-index: 10; } </ style > < div class = "king" > < div class = "player-layout" ></ div > </ div > |
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载动画
添加峡谷图片,背景线性渐变,旋转。添加边框,然后用 box-shadow
看起来发光效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <style> ... . center { position : absolute ; height : 8 rem; width : 8 rem; top : 50% ; left : 50% ; transform: translate( -50% , -50% ) rotate( 45 deg); background : linear-gradient( 90 deg, #212f46 , #5b99ff ); border : . 3 rem solid #55a9ef ; box-shadow: 0px 0px . 8 rem #88c0f0 ; padding : . 2 rem; } . center img{ width : 100% ; height : 100% ; } </style> <div class= "king" > <div class= "player-layout" > <div class= "center" ><img src= "../images/123123.jpg" ></div> </div> </div> |
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载动画
下面把10个玩家,分2组,放到峡谷图片两侧。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | < style > ... ... .group{ position: relative; width: calc((100% - 13rem)/2); top: 50%; transform: translate(0, -50%); } .group1{ text-align: right; float: left; } .group2{ text-align: left; float: right; } .palyer{ width: 4rem; height: 4rem; display: inline-block; background: url('../images/123123.jpg'); background-size: cover; border: .3rem solid #55a9ef; box-shadow: 0px 0px .8rem #88c0f0; } </ 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边框加载动画
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | .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 . 3 rem; animation: clipMe 6 s linear infinite; } .player::before { animation-delay: -3 s; } @keyframes clipMe { 0% , 100% { clip : rect( 0 , 4.8 rem, 4.8 rem, 4.3 rem); } 25% { clip : rect( 0px , 4.8 rem, . 3 rem, 0 ); } 50% { clip : rect( 0 , . 3 rem, 4.8 rem, 0 ); } 75% { clip : rect( 4.3 rem, 4.8 rem, 4.8 rem, 0 rem); } } |
主要用到 clip
属性。
clip 属性剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢?“clip” 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。
唯一合法的形状值是:rect (top, right, bottom, left)
这个属性很好玩儿,有兴趣的可以好好研究一下。
最后我们给两个分组上面加高光效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .group::before, .group::after{ position : absolute ; content : '' ; background : linear-gradient(to right , #212f46 02, #7499d7 , #212f46 02); height : . 3 rem; width : 10 rem; } .group::before{ top : -1.5 rem; } .group::after{ bottom : -1.5 rem; } .group 1: :before{ right : 0 ; } .group 1: :after{ right : 5 rem; } .group 2: :after{ left : 5 rem; } |
ok,玩家这块我们先修饰到这样,有兴趣的拉取源码继续码。
背景镂空旋转正方形
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | < div class = "king" > < div class = "player-layout" > ... </ div > < div class = "matrix" ></ div > </ div > < style > .matrix{ position: absolute; height: 17.6rem; width: 17.6rem; background: #008cf4; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); z-index: 1; } </ style > |
这里的height为什么是17.6rem了?
这里也是计算通过勾股定理(a²+b²=c²)计算出来的啦。知道对角线就是容器的高度25rem,25x25/2再开方就得出了。
上方设了个醒目的颜色,把容器放到哪里,然后我们来美化一下它
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | < style > ... .border{ position: absolute; height: 17.6rem; width: 17.6rem; text-align: center; } .border::before,.border::after{ position: absolute; display: block; width: 100%; height: 2.5rem; color: #fff; background: linear-gradient(to top,#212f4602, #7499d7); } .border1::before{ content: ' web前端扣群 784783012 '; } .border1::after{ bottom: 0; content: ' 跟 我 一 起 '; transform: rotate(180deg); } .border2{ transform: rotate(90deg); } .border2::before{ content: ' 学 习 前 端 '; } .border2::after{ bottom: 0; content: ' 让 你 秀 起 来 '; transform: rotate(180deg); } </ style > ... < div class = "matrix" > < div class = "border border1" ></ div > < div class = "border border2" ></ div > </ div > |
用两个div元素来制作边框,边框添加线性渐变样式
下面继续修饰一下镂空正方形,这里宽高,之前是17.6,由于加了border和padding,所以去掉。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .matrix{ position : absolute ; /* 修改宽高 */ height : 16.7 rem; width : 16.7 rem; top : 50% ; left : 50% ; transform: translate( -50% , -50% ) rotate( 45 deg); z-index : 1 ; /* 添加边框,与间距 */ border : . 1 rem solid #7499d7 ; padding : . 4 rem; } .border{ position : absolute ; /* 修改宽高 */ height : 16.7 rem; width : 16.7 rem; text-align : center ; } |
正方形文字放大动画
这里就做了文字阴影,缩放暂时没有实现,目前缩放会改变原有文字,所以必须重新copy一份文字,来做,有兴趣的可以去试试。
1 2 3 4 5 6 7 8 9 10 11 12 | . border ::before,. border ::after{ ... animation: text-an 1.5 s linear infinite; } @keyframes text-an { 0% { text-shadow : 0 0 0 #ffffff ; } 100% { text-shadow : 0 -6 rem . 4 rem #ffffff 10 ; } } |
文字按钮制作
利用:before、:after伪类制作梯形。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | < div class = "king" > ... < div class = "button" >确认</ div > </ div > < style > .button{ position: relative; background: #3e3a31; width: 6.5rem; height: 2rem; line-height: 2rem; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 11; text-align: center; cursor: pointer; } .button::before,.button::after{ position: absolute; content: ''; display: inline-block; width: 0; height: 0; border-width: 1.43rem; border-style: solid; border-color: #3e3a31 transparent transparent transparent; } .button::before{ transform: rotate(-135deg); left: -1.40rem; top: -1.42rem; } .button::after{ transform: rotate(135deg); right: -1.43rem; top: -1.43rem; } </ style > |
本节文章就到此为止吧,还有一些细节的地方,大家可以在练习操作的时候优化。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了CSS动态条形加载条效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-08-07
- 这篇文章主要介绍了实现点击按钮后CSS加载效果的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2019-05-09
- IE一直是特殊的一个浏览器,我们可以使用一些方法来指定样式表只在IE浏览器下被加载。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-02-20
最新评论