[无聊向]MCBBS Extender里的技术细节 #1 为啥勋章是亮闪闪的 - 矿工茶馆

Zapic

本帖最后由 Zapic 于 2020-8-15 09:45 编辑

有人可能用过MCBBS Extender.
也可能没有用过,但是可能看到过宣传图:

大概好看多了.
但是我们今天不说他好看与否,我们来聊聊为啥他能亮闪闪的.

今天的文风是说明文,不要问我为啥不可爱.

#0 思路
这种亮闪闪的东西有点眼熟么?
那再看一下?

这个东西就是由这个启发而来的.
我们只需要在鼠标悬浮到勋章上的时候将勋章"抬起",并在旁边显示勋章的信息就行了.
我们今天只说如何让勋章"抬起"并"反光".

有条件的观众可以打开你的DevTools跟我们一起动手.
这种改造兼容IE 11+,Chrome 49+,Firefox 16+,以及其他的基于Webkit的国产~~垃圾套壳~~浏览器.
就算你的浏览器不满足以上条件,你也可以动手试试,看看旧浏览器与新浏览器的区别.

以下内容已经假定您可以熟练的使用您所使用的浏览器提供的DevTools.
我们将以拥有市面上90%占有量的Chrome浏览器 ---- 的老对手 Firefox浏览器做例子.

#1 尝试

让我们先来改造勋章.

先打开你的个人主页,找到你的勋章.

如你所见,这是一个非常简单的HTML结构.

<img
src="static//image/common/m_rc1.png"
alt="小麦种勋章"
id="md_107"
onmouseover="showMenu({'ctrlid':this.id, 'menuid':'md_107_menu', 'pos':'12!'});"
initialized="true"
>

复制代码

为了方便讲解,我们去掉那些没用的东西.

<img
src="static//image/common/m_rc1.png"
id="md_107"
onmouseover="showMenu({'ctrlid':this.id, 'menuid':'md_107_menu', 'pos':'12!'});"
>

复制代码

一个图片源,一个元素id,一个onmouseover(鼠标悬浮在元素上面)事件,这就是你所看到的那个勋章.
我们看一下他的样式:

a img {
border: none;
}

复制代码

有用的大概只有这一个.
这个样式去掉了某些浏览器上图片原本有的边框,但是现代浏览器一般没有这种边框了.

扯远了,我们先给勋章加一个基础的阴影.
这里用到的是box-shadow属性,兼容性查询: https://caniuse.com/#search=box-shadow
兼容性还行.

MCBBS Extender的阴影是这样加的:

box-shadow: 0px 2px 5px 0px black;

复制代码

我们直接复制过来.
点击样式查看器右上角的加号,为这个元素新建一个样式规则.
在新建的样式规则括号空白处单击,可以添加新的属性.
按Ctrl+V可以把剪切板里的规则直接粘贴进里面.
然后按下回车,就可以应用你的样式.

回到页面查看你修改的的那个勋章:
我的天怎么跟屎一样?

由于勋章图片并不能与img元素完全契合,我们可能需要对这个元素进行一些额外的调整.
首先更改这个元素的长宽,让他去掉边框.
继续在空白处单击,添加新的属性:

width: 35px;
height: 55px;

复制代码

这里输入的是勋章图片的原宽高
点击数字并按上下键可以调整他们的值,调整直至边框消失.
调好了么?
调不好的放弃吧.你会发现貌似边框会一直存在.

这是因为图片会根据img元素的大小而改变大小,永远不会超出元素.
那我们是不是就没辙了?
小场面,CSS可以让图片不再根据img元素的大小而决定大小.

object-fit: none;
object-position: center;

复制代码

object-fit 属性可以改变图片的契合行为,none就是不跟随img元素的大小而改变大小.
object-position可以决定图片显示的位置,因为边框存在于四周,所以这里用的是居中显示,方便裁剪.

再点击数字,按上下键尝试调整直至边框恰好消失,而不裁剪图片原本的内容.

但是仔细观察,貌似四个角还有一些白点没被裁剪掉.
这是因为图片上勋章的边框并非完整的长方形,而是带有圆角的.
那我们也为img元素添加圆角即可.
这里用到的是border-radius属性:

border-radius: 0px;

复制代码

点击数字,按上下键调整直至白点消失.
好了,这看起来就像MCBBS Extender里的勋章了.

事实上,MCBBS Extender里的勋章并不是这样实现的,以上内容都是扯犊子.
为什么不这样实现呢?

img标签是一种特殊的元素,不像其他大多元素一样,img标签不允许拥有子元素.
这就为后期向勋章上添加反光制造了麻烦.

所以我们需要把原来的勋章改写一下,这里用的是span标签.
在Devtools里,选中原先的img元素,右键,编辑HTML.
换行,写入以下内容:

复制代码

再将上面img标签的核心内容复制下来:

<span
src="static//image/common/m_rc1.png"
id="md_107_new"
onmouseover="showMenu({'ctrlid':this.id, 'menuid':'md_107_menu', 'pos':'12!'});"
>

复制代码

由于元素的id必须唯一,我们修改了元素的id.

点击文本框外的空白区域保存更改.
你会发现:
啥都没有发生.
这是因为span标签并不能直接显示图片.
所以我们将把图片作为背景显示.
在Devtools里选中span,在样式编辑器里添加新的规则,顺便把之前的阴影也弄下来:

width: 35px;
height: 55px;
display: inline-block;
box-shadow: 0px 2px 5px 0px black;

复制代码

再使用background-image属性,为span添加背景图片:

width: 35px;
height: 55px;
display: inline-block;
box-shadow: 0px 2px 5px 0px black;
background-image: url(static//image/common/m_rc1.png)

复制代码

于是边框又出来了,让我们再把边框削掉.

由于背景图片默认不会跟随他所在的元素大小,我们只需要把背景图片居中:

background-position: center;

复制代码

再像上面一样,调整长宽和圆角.

好多了,这就是第一步,也是MCBBS Extender里勋章的样子.

接下来,让鼠标悬浮在上面的时候"抬起"勋章.
我们在上面看到了onmouseover事件,在鼠标悬浮在上面是会触发.
我们只需要在触发事件时用JavaScript改变元素的样式就行了...
才不是.

接下来是CSS选择器小课堂,我们要来谈谈:hover伪类.
首先,我们在上面编辑代码的时候,可能已经见到了一些简单的选择器,就像这样:

"#md_107_new"就是一个选择器,这个选择器永远会选中这个元素,无论这个元素处于什么状态.
伪类提供了选中处于特殊状态元素的能力,通过hover伪类,我们可以只选中处于"被鼠标悬浮"状态下的元素:

#md_107_new:hover {
/* ... */
}

复制代码

这个规则里的样式只会当这个元素"被鼠标悬浮"时才会生效.
想要了解更多,可以参考MDN的文档: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

好了,讲完了.
开始上手实践.
选中你新建的span,添加一个新的规则.
与之前不一样,你需要先修改他的选择器,在自动生成的选择器后添加":hover",并按下回车.
你会发现整个规则都变灰了.
这是因为没有选中这个元素,因为鼠标没有悬浮在上面.
即使你将鼠标悬浮在上面,他也可能还是灰色的.这是因为浏览器没有及时刷新他的状态.
但这不会影响样式生效,我们继续编辑样式.
为了方便调试,我们可以使span一直保持"被鼠标悬浮"的状态.
在加号旁边找到":hov"按钮,勾选":hover",即可让元素保持"被鼠标悬浮"的状态.

接下来就是要让勋章"抬起",我们推荐使用WebGL实现,因为效率更高...
并不,大材小用了.
我们将使用CSS的transform属性,对元素进行变形.
使用transform提供的矩阵变换功能,可以很轻松的让勋章"抬起".
由于该功能较为复杂,我们不在这里说明每一个数字都是干啥的,详细说明请参考这里: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/matrix3d (英文页面)
不过也并不需要理解,点击数字,按上下键,即可即时的展示每一个参数的功能.
慢慢调整可能有些麻烦,我们直接从MCBBS Extender里扒代码:

transform: matrix3d(1, 0, 0, 0, 0, 1, 0, -0.003, 0, 0, 1, 0, 0, -1.5, 0, 0.9);

复制代码

解除掉:hover状态,移动鼠标指针到上面:

好像不大对.
这是因为没有添加过渡动画.
所以,在原先的规则(而非带:hover伪类的)里添加过渡动画参数:

transition-duration: .3s;

复制代码

只需要指定动画时长,就可以非常简单的为元素添加过渡动画,这里指定了一个0.3秒的过渡时长.
再把鼠标放上去:

差不多了.
"抬起"之后,由于勋章离开了"地面",我们需要减淡他的阴影,直接扒MCBBS Extender调整好的阴影代码.
在:hover的规则里将原先的阴影覆盖掉:

box-shadow: 0px 2px 10px -3px black;

复制代码

再把鼠标放上去:

很好.

接下来就是第二章了.

#2 反光
你知道吗?前面一共有7000多个字节的说.
花了我一个多小时的说.
为了放松一下,这一小章会换一个文风的说.
奇怪的口癖增加了的说(
有了前面一章的知识,这一章的内容会比较简单的说.

开始了哦.

还记得上一章里说为啥要用span去替代img标签么?
诶,不记得了么?
真是的,没有好好听课嘛...
下次一定要认真看哦.

img标签是一种特殊的元素,不像其他大多元素一样,img标签不允许拥有子元素.
这就为后期向勋章上添加反光制造了麻烦.

为什么说会"制造了麻烦"呢?
反光其实只是叠在元素上的一层"滤镜",如果不能添加子元素,把"滤镜"叠在上面会非常的麻烦desu
所以换成了span哦.

事到如今,原先的img元素已经没有任何用处了,真是悲哀呢...
所以,不如趁这个机会练习一下怎么删除元素desu
点击Devtools里原先的img元素,按下键盘上的Delete就可以了哦.
但是,你可知道元素的4中删除方法?
不----告----诉----你----

现在碍事的img已经消失了哦,现在就让勋章KiraKira的吧~
"滤镜"也是一个元素,所以我们要把新的"滤镜"元素插进span里面哦~
...
听起来好糟糕的说...

所以我们在这里使用其他的东西替代好了.
铛铛铛铛~
是时候让伪元素出场了!

等等,你还记得伪类是什么么?
...
又没有认真看desu...
我真的码了一个多小时啊...

伪类提供了选中处于特殊状态元素的能力

伪元素提供了在元素内创建不存在的元素的能力,而且十分优雅desu.
伪元素有两个,before和after,为了让"滤镜"盖在勋章上,这里用的是after哦.

我们就拿刚刚的span开始吧.
创建伪元素,不需要直接编辑原来的DOM,只需要编写样式就可以了,十分便利desu:

#md_107_new:after{
/* ... */
}

复制代码

直接在里面编写样式就可以为伪元素添加样式,但是伪元素在没有内容的情况下不会显示哦.
怎么办呢,很简单哦:

#md_107_new:after{
content: ''
/* ... */
}

复制代码

就可以让伪元素正常显示了哦.
接下来就是添加反光"滤镜",滤镜的素材已经做好了哦,可以从这个链接获取desu: https://i.loli.net/2020/08/15/D3euvxyhY4iaMZG.png .
然后让"滤镜"完全覆盖住勋章,在伪元素上添加这些样式desu:

display: block;
background-image: url(https://i.loli.net/2020/08/15/D3euvxyhY4iaMZG.png);
width: 100%;
height: 100%;
transition-duration: .3s;

复制代码

就盖住了desu:

但是,不是应该"抬起"时反光更明显嘛...
所以呢,要降低没有"抬起"时"滤镜强度",顺便加上过渡动画:

opacity: 0.6;
transition-duration: .3s;

复制代码

就好了:

接下来,就是要增加"抬起"时的"滤镜强度"desu.
直接用:hover伪类去选中"被鼠标悬浮"的伪元素就可以了嘛...

#md_107_new:after:hover...

复制代码

然后往里面写样式,敲下回车!再把鼠标往上放!
然而什么都没有发生.

为什么嘛...

"我是伪元素,这样选是不行的啦,笨蛋."
"被骂笨蛋了..."
"没关系啦,你不是选中了我的父元素再选中了我么,不如再选中'被悬浮'的父元素再选择我吧"
"诶诶诶,是这样么?"
"试试嘛."

#md_107_new:hover:after{
opacity: 1;
}

复制代码

好像...可以了诶...

最后,为了模拟真实的反光,只要加上反光的视差效果就可以了哦.
反射素材的光源是固定在勋章右上的,"抬起"时勋章会有更大的反射面积,所以只需要上下移动"滤镜"来模拟反射面积的改变就可以了哦:

#md_107_new:after {
/* ... */
margin-top: -15px;
}

复制代码

#md_107_new:hover:after {
/* ... */
margin-top: 0;
}

复制代码

margin-top就是用来移动"滤镜"距离顶部的位置的哦.
再把鼠标放上去:

终于...弄好了呢...KiraKira的...

#2 结束

写了差不多三个小时呢...

素材也在桌面上堆成了小山(
歌单也反反复复播放了四五遍...
不过各位看得开心就好~
晚安.

2021.12 数据，可能有更多内容

有人可能用过MCBBS Extender.
也可能没有用过,但是可能看到过宣传图:

大概好看多了.
但是我们今天不说他好看与否,我们来聊聊为啥他能亮闪闪的.

今天的文风是说明文,不要问我为啥不可爱.

#0 思路
这种亮闪闪的东西有点眼熟么?
那再看一下?

如你所见,这是一个非常简单的HTML结构.

代码:

<img
src="static//image/common/m_rc1.png"
alt="小麦种勋章"
id="md_107"
onmouseover="showMenu({'ctrlid':this.id, 'menuid':'md_107_menu', 'pos':'12!'});"
initialized="true"
>

为了方便讲解,我们去掉那些没用的东西.

代码:

<img
src="static//image/common/m_rc1.png"
id="md_107"
onmouseover="showMenu({'ctrlid':this.id, 'menuid':'md_107_menu', 'pos':'12!'});"
>

一个图片源,一个元素id,一个onmouseover(鼠标悬浮在元素上面)事件,这就是你所看到的那个勋章.
我们看一下他的样式:

代码:

a img {
border: none;
}

代码:

box-shadow: 0px 2px 5px 0px black;

代码:

width: 35px;
height: 55px;

代码:

object-fit: none;
object-position: center;

代码:

border-radius: 0px;

代码:

再将上面img标签的核心内容复制下来:

代码:

<span
src="static//image/common/m_rc1.png"
id="md_107_new"
onmouseover="showMenu({'ctrlid':this.id, 'menuid':'md_107_menu', 'pos':'12!'});"
>

代码:

width: 35px;
height: 55px;
display: inline-block;
box-shadow: 0px 2px 5px 0px black;

再使用background-image属性,为span添加背景图片:

代码:

width: 35px;
height: 55px;
display: inline-block;
box-shadow: 0px 2px 5px 0px black;
background-image: url(static//image/common/m_rc1.png)

于是边框又出来了,让我们再把边框削掉.

由于背景图片默认不会跟随他所在的元素大小,我们只需要把背景图片居中:

代码:

background-position: center;

代码:

#md_107_new:hover {
/* ... */
}

代码:

transform: matrix3d(1, 0, 0, 0, 0, 1, 0, -0.003, 0, 0, 1, 0, 0, -1.5, 0, 0.9);

解除掉:hover状态,移动鼠标指针到上面:

好像不大对.
这是因为没有添加过渡动画.
所以,在原先的规则(而非带:hover伪类的)里添加过渡动画参数:

代码:

transition-duration: .3s;

只需要指定动画时长,就可以非常简单的为元素添加过渡动画,这里指定了一个0.3秒的过渡时长.
再把鼠标放上去:

差不多了.
"抬起"之后,由于勋章离开了"地面",我们需要减淡他的阴影,直接扒MCBBS Extender调整好的阴影代码.
在:hover的规则里将原先的阴影覆盖掉:

代码:

box-shadow: 0px 2px 10px -3px black;

再把鼠标放上去:

img标签是一种特殊的元素,不像其他大多元素一样,img标签不允许拥有子元素.
这就为后期向勋章上添加反光制造了麻烦.

伪类提供了选中处于特殊状态元素的能力

代码:

#md_107_new:after{
/* ... */
}

直接在里面编写样式就可以为伪元素添加样式,但是伪元素在没有内容的情况下不会显示哦.
怎么办呢,很简单哦:

代码:

#md_107_new:after{
content: ''
/* ... */
}

代码:

display: block;
background-image: url(https://i.loli.net/2020/08/15/D3euvxyhY4iaMZG.png);
width: 100%;
height: 100%;
transition-duration: .3s;

就盖住了desu:

但是,不是应该"抬起"时反光更明显嘛...
所以呢,要降低没有"抬起"时"滤镜强度",顺便加上过渡动画:

代码:

opacity: 0.6;
transition-duration: .3s;

就好了:

接下来,就是要增加"抬起"时的"滤镜强度"desu.
直接用:hover伪类去选中"被鼠标悬浮"的伪元素就可以了嘛...

代码:

#md_107_new:after:hover...

然后往里面写样式,敲下回车!再把鼠标往上放!
然而什么都没有发生.

为什么嘛...

"我是伪元素,这样选是不行的啦,笨蛋."
"被骂笨蛋了..."
"没关系啦,你不是选中了我的父元素再选中了我么,不如再选中'被悬浮'的父元素再选择我吧"
"诶诶诶,是这样么?"
"试试嘛."

代码:

#md_107_new:hover:after{
opacity: 1;
}

好像...可以了诶...

代码:

#md_107_new:after {
/* ... */
margin-top: -15px;
}

代码:

#md_107_new:hover:after {
/* ... */
margin-top: 0;
}

margin-top就是用来移动"滤镜"距离顶部的位置的哦.
再把鼠标放上去:

终于...弄好了呢...KiraKira的...

#2 结束

写了差不多三个小时呢...

素材也在桌面上堆成了小山(
歌单也反反复复播放了四五遍...
不过各位看得开心就好~
晚安.

StreamReader

只学过HTML和CSS表示只能看懂前半段

话说最后几段代码也是css吧

动画那一段果然是javascript做的，话说steam里面的集换式卡牌还有根据鼠标位置不同从而改变光照和抬起角度大佬能做一个吗
我虽然没学过js，但是你看看这种思路对不对：通过判断鼠标与图片的相对位置从而以数学关系计算出"抬起的角度和方向"，然后光源...
只有margin我也不知道怎么弄

~~果然是大佬在我熟睡的时候偷偷码字~~

PercyDan

看不懂css的路过

Zapic

SHZLP 发表于 2020-8-15 06:36
只学过HTML和CSS表示只能看懂前半段
话说最后几段代码也是css吧
动画那一段果然是javascript ...

这次全都是CSS,没有用js.
steam那种效果确实可以用js做出来,思路也确实是像你说的那样.

margin这东西比较玄学,有时生效有时不生效,反正调整位置的时候都试一下就行:
margin>top,left>pos:abs,top,left

45gfg9

谢谢滚进收藏夹吃灰
再过几天一定学css（

BigKillBla

哇的天大佬这是个什么东西

NoName德里奇

前端带师！
请您出书罢！！（震声）

ZJY2021

只会玩MC的萌新真的看不懂.jpg

JohnnyLee0215

不愧是你 ✌ 给大佬跪了

囗il

【抽烟（不我不抽烟，我宁愿拿个艾草棒点了吸也不抽烟）】

第二部分看了有种“极光creeper参与协同编辑”的赶脚。

当然也顶多是有部分相似，如果是极光的话早就以“吾辈”自称了。

文风还是蛮好分辨的，只不过突然可爱有点不适应。
【和M18A1去贴贴吧（无感情）】

豆沙包的mc

本帖最后由豆沙包的mc 于 2020-8-15 13:23 编辑

哇，原来是这么弄的，学到了…于是我去看了看我的勋章墙

留下了不争气的眼泪，2019年注册现在只有一个勋章