[ilidilid] 哔哩哔哩(真)镜像站

296 字
1 分钟
[ilidilid] 哔哩哔哩(真)镜像站
[ilidilid] 哔哩哔哩(真)镜像站

跟你们说,这个CSS,敲好玩得(然并卵


http://www.ilidilid.com/

前几天这玩意在我各个Q群里轮了一遍

点开一看,确实蛮有意思的,xswl

笑的同时我也很好奇这是怎么做到的,于是耐不住寂寞F12看了一下

研究一下#

一开始我以为是用js做到的,但是我看了下页面结构,整个页面就<body>里有一个反代b站的<iframe>,下面一段js脚本

然后稍微看了下js脚本,都是些无关紧要的操作

瞬间反应过来这应该是CSS,但是我确实没有印象有哪个CSS属性可以做到镜像效果的

于是看了看<head>部分的CSS,然后马上就注意到了……

哇哦!负……负1

只能说自己技艺不精了,写了一年的CSS都没能想到这种操作

也就是说,实际上这个CSS只是利用X轴缩放比例为-1,把整个<iframe>的左右给反过来了

关于transform的知识可以看 https://www.runoob.com/cssref/css3-pr-transform.html

实践一下#

于是紧接着我又加了个scaleY(-1),这回真的反了

新知识GET

文章分享

如果这篇文章对你有帮助,欢迎分享给更多人!

[ilidilid] 哔哩哔哩(真)镜像站
https://moe.best/posts/ilidilid/
作者
神代綺凛
发布于
2018-02-21
许可协议
CC BY-NC-SA 4.0
Profile Image of the Author
神代綺凛
专业咕咕
分类
标签
站点统计
文章
107
分类
15
标签
269
总字数
140,468
运行时长
0 天
最后活动
0 天前
站点信息
构建平台
EdgeOne Pages
博客版本
Firefly v6.16.8
文章许可
CC BY-NC-SA 4.0
文章目录