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

原创 智云编程 随笔 前端 49阅读 10 天前 举报

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

第一:王者这么火,电竞这么火。
第二:主要还是来学习 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边框加载动画

主要用到clip属性。
clip 属性剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢?“clip” 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。
唯一合法的形状值是:rect (top, right, bottom, left)

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

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

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

背景镂空旋转正方形

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

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

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

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

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

正方形文字放大动画

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

文字按钮制作

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

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

有句话叫做“方法不对,努力白费”所有的前端大神都有自己的学习方法,而学web前端的学习也基本一致,而对于一个什么都不懂的初学者,根本不会知道该怎么学,这也是造成失败的最直接原因。所以学web前端一定要有人指点。如果你处在迷茫期,找不到方向。可以加入我们的前端学习交流qun: 784783012 。有任何不明白的东西随时来问我。点击:前端学习圈

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复