[ilidilid] 哔哩哔哩(真)镜像站
当前页面是本站的「Baidu MIP」版。查看和发表评论请点击:完整版 »
跟你们说,这个CSS,敲好玩得(然并卵
ilidilid
前几天这玩意在我各个Q群里轮了一遍 ::aru:confuse::
点开一看,确实蛮有意思的,xswl ::aru:cryingface::
笑的同时我也很好奇这是怎么做到的,于是耐不住寂寞F12看了一下
研究一下
一开始我以为是用js做到的,但是我看了下页面结构,整个页面就<body>
里有一个反代b站的<iframe>
,下面一段js脚本
然后稍微看了下js脚本,都是些无关紧要的操作 ::aru:unhappy::
瞬间反应过来这应该是CSS,但是我确实没有印象有哪个CSS属性可以做到镜像效果的 ::aru:sweat::
于是看了看<head>
部分的CSS,然后马上就注意到了……
哇哦!负……负1
只能说自己技艺不精了,写了一年的CSS都没能想到这种操作 ::aru:blood::
也就是说,实际上这个CSS只是利用X轴缩放比例为-1
,把整个<iframe>
的左右给反过来了
关于transform
的知识可以看
https://www.runoob.com/cssref/css3-pr-transform.html
实践一下
于是紧接着我又加了个scaleY(-1)
,这回真的反了 ::aru:thumb::
新知识GET