用户:晨茗biu～/sandbox

晨茗biu～的个人css沙盒，用于本人的部分css测试。
测试成功的代码可能会保留，可供各位随意参考或使用。

像素画

一个像素画：

代码解释：用box-shadow属性填充色块。box-shadow为一种针对图形的阴影属性，该属性可在类型定义中通过调整阴影位置来同时创建多个色块，可简化代码复杂度。该属性的用法为box-shadow: offset-x offset-y blur-radius spread-radius color，其中“blur-radius”“spread-radius”用于调整阴影的模糊程度，在像素画实现中填0或不填（本段代码使用工具直接生成，因此这两个参数都填了0，实际上不填也是没问题的）。“offset-x”“offset-y”分别定义了阴影的在两个方向的偏移距离，单位为“px”，在本段代码中为调整色块的位置。
示例代码：

.pixelart-to-css {
 /*在创建多个阴影时，不同阴影的设定用“,”隔开*/
 /*阴影位置的设定和单个“像素”的大小成整数关系*/
 box-shadow: 5px 5px 0 0 #303f46, 10px 5px 0 0 #303f46, 15px 5px 0 0 #303f46, 20px 5px 0 0 #303f46, 25px 5px 0 0 #303f46, 30px 5px 0 0 #303f46, 35px 5px 0 0 #ffffff, 40px 5px 0 0 #303f46, 45px 5px 0 0 #303f46, 50px 5px 0 0 #303f46, 55px 5px 0 0 #303f46, 60px 5px 0 0 #ffffff, 65px 5px 0 0 #303f46, 70px 5px 0 0 #303f46, 75px 5px 0 0 #303f46, 80px 5px 0 0 #303f46,/*设置第一行*/
 5px 10px 0 0 #303f46, 10px 10px 0 0 #303f46, 15px 10px 0 0 #303f46, 20px 10px 0 0 #303f46, 25px 10px 0 0 #303f46, 30px 10px 0 0 #ffffff, 35px 10px 0 0 #ffcdd2, 40px 10px 0 0 #ffffff, 45px 10px 0 0 #303f46, 50px 10px 0 0 #303f46, 55px 10px 0 0 #ffffff, 60px 10px 0 0 #ffcdd2, 65px 10px 0 0 #ffffff, 70px 10px 0 0 #303f46, 75px 10px 0 0 #303f46, 80px 10px 0 0 #303f46,/*第二行*/
 5px 15px 0 0 #303f46, 10px 15px 0 0 #303f46, 15px 15px 0 0 #303f46, 20px 15px 0 0 #303f46, 25px 15px 0 0 #303f46, 30px 15px 0 0 #ffffff, 35px 15px 0 0 #ffcdd2, 40px 15px 0 0 #ffcdd2, 45px 15px 0 0 #ffffff, 50px 15px 0 0 #ffffff, 55px 15px 0 0 #ffcdd2, 60px 15px 0 0 #ffcdd2, 65px 15px 0 0 #ffffff, 70px 15px 0 0 #303f46, 75px 15px 0 0 #303f46, 80px 15px 0 0 #303f46,/*第三行*/
 5px 20px 0 0 #303f46, 10px 20px 0 0 #303f46, 15px 20px 0 0 #303f46, 20px 20px 0 0 #303f46, 25px 20px 0 0 #303f46, 30px 20px 0 0 #ffffff, 35px 20px 0 0 #ffcdd2, 40px 20px 0 0 #ffffff, 45px 20px 0 0 #ffffff, 50px 20px 0 0 #ffffff, 55px 20px 0 0 #ffffff, 60px 20px 0 0 #ffcdd2, 65px 20px 0 0 #ffffff, 70px 20px 0 0 #303f46, 75px 20px 0 0 #303f46, 80px 20px 0 0 #303f46,/*第四行*/
 5px 25px 0 0 #303f46, 10px 25px 0 0 #303f46, 15px 25px 0 0 #303f46, 20px 25px 0 0 #303f46, 25px 25px 0 0 #303f46, 30px 25px 0 0 #ffffff, 35px 25px 0 0 #ffffff, 40px 25px 0 0 #ffffff, 45px 25px 0 0 #ffffff, 50px 25px 0 0 #ffffff, 55px 25px 0 0 #ffffff, 60px 25px 0 0 #ffffff, 65px 25px 0 0 #ffffff, 70px 25px 0 0 #303f46, 75px 25px 0 0 #303f46, 80px 25px 0 0 #303f46,/*第五行*/
 5px 30px 0 0 #303f46, 10px 30px 0 0 #303f46, 15px 30px 0 0 #303f46, 20px 30px 0 0 #303f46, 25px 30px 0 0 #303f46, 30px 30px 0 0 #ffffff, 35px 30px 0 0 #000000, 40px 30px 0 0 #ffffff, 45px 30px 0 0 #ffffff, 50px 30px 0 0 #000000, 55px 30px 0 0 #ffffff, 60px 30px 0 0 #ffffff, 65px 30px 0 0 #ffffff, 70px 30px 0 0 #303f46, 75px 30px 0 0 #303f46, 80px 30px 0 0 #303f46,/*第六行*/
 5px 35px 0 0 #303f46, 10px 35px 0 0 #303f46, 15px 35px 0 0 #303f46, 20px 35px 0 0 #303f46, 25px 35px 0 0 #303f46, 30px 35px 0 0 #ffffff, 35px 35px 0 0 #ffffff, 40px 35px 0 0 #000000, 45px 35px 0 0 #ffffff, 50px 35px 0 0 #ffffff, 55px 35px 0 0 #ffffff, 60px 35px 0 0 #ffffff, 65px 35px 0 0 #ffffff, 70px 35px 0 0 #303f46, 75px 35px 0 0 #303f46, 80px 35px 0 0 #303f46,/*第七行*/
 5px 40px 0 0 #303f46, 10px 40px 0 0 #303f46, 15px 40px 0 0 #303f46, 20px 40px 0 0 #303f46, 25px 40px 0 0 #303f46, 30px 40px 0 0 #ffffff, 35px 40px 0 0 #ffffff, 40px 40px 0 0 #ffffff, 45px 40px 0 0 #ffffff, 50px 40px 0 0 #ffffff, 55px 40px 0 0 #ffffff, 60px 40px 0 0 #ffffff, 65px 40px 0 0 #ffffff, 70px 40px 0 0 #303f46, 75px 40px 0 0 #303f46, 80px 40px 0 0 #303f46,/*第八行*/
 5px 45px 0 0 #303f46, 10px 45px 0 0 #303f46, 15px 45px 0 0 #303f46, 20px 45px 0 0 #303f46, 25px 45px 0 0 #303f46, 30px 45px 0 0 #303f46, 35px 45px 0 0 #ffffff, 40px 45px 0 0 #ffffff, 45px 45px 0 0 #ffffff, 50px 45px 0 0 #ffffff, 55px 45px 0 0 #ffffff, 60px 45px 0 0 #ffffff, 65px 45px 0 0 #303f46, 70px 45px 0 0 #303f46, 75px 45px 0 0 #303f46, 80px 45px 0 0 #303f46,/*第九行*/
 5px 50px 0 0 #303f46, 10px 50px 0 0 #303f46, 15px 50px 0 0 #303f46, 20px 50px 0 0 #303f46, 25px 50px 0 0 #303f46, 30px 50px 0 0 #303f46, 35px 50px 0 0 #303f46, 40px 50px 0 0 #ffffff, 45px 50px 0 0 #ffffff, 50px 50px 0 0 #ffffff, 55px 50px 0 0 #ffffff, 60px 50px 0 0 #303f46, 65px 50px 0 0 #303f46, 70px 50px 0 0 #ffffff, 75px 50px 0 0 #303f46, 80px 50px 0 0 #303f46,/*第十行*/
 5px 55px 0 0 #303f46, 10px 55px 0 0 #303f46, 15px 55px 0 0 #303f46, 20px 55px 0 0 #303f46, 25px 55px 0 0 #303f46, 30px 55px 0 0 #303f46, 35px 55px 0 0 #303f46, 40px 55px 0 0 #ffffff, 45px 55px 0 0 #ffffff, 50px 55px 0 0 #ffffff, 55px 55px 0 0 #ffffff, 60px 55px 0 0 #303f46, 65px 55px 0 0 #303f46, 70px 55px 0 0 #303f46, 75px 55px 0 0 #ffffff, 80px 55px 0 0 #303f46,/*第十一行*/
 5px 60px 0 0 #303f46, 10px 60px 0 0 #303f46, 15px 60px 0 0 #303f46, 20px 60px 0 0 #303f46, 25px 60px 0 0 #303f46, 30px 60px 0 0 #303f46, 35px 60px 0 0 #ffffff, 40px 60px 0 0 #ffffff, 45px 60px 0 0 #ffffff, 50px 60px 0 0 #ffffff, 55px 60px 0 0 #ffffff, 60px 60px 0 0 #ffffff, 65px 60px 0 0 #303f46, 70px 60px 0 0 #303f46, 75px 60px 0 0 #ffffff, 80px 60px 0 0 #303f46,/*第十二行*/
 5px 65px 0 0 #303f46, 10px 65px 0 0 #303f46, 15px 65px 0 0 #303f46, 20px 65px 0 0 #303f46, 25px 65px 0 0 #ffffff, 30px 65px 0 0 #ffffff, 35px 65px 0 0 #ffffff, 40px 65px 0 0 #ffffff, 45px 65px 0 0 #ffffff, 50px 65px 0 0 #ffffff, 55px 65px 0 0 #ffffff, 60px 65px 0 0 #ffffff, 65px 65px 0 0 #303f46, 70px 65px 0 0 #303f46, 75px 65px 0 0 #ffffff, 80px 65px 0 0 #303f46,/*第十三行*/
 5px 70px 0 0 #303f46, 10px 70px 0 0 #303f46, 15px 70px 0 0 #303f46, 20px 70px 0 0 #303f46, 25px 70px 0 0 #ffffff, 30px 70px 0 0 #ffffff, 35px 70px 0 0 #ffffff, 40px 70px 0 0 #ffffff, 45px 70px 0 0 #ffffff, 50px 70px 0 0 #ffffff, 55px 70px 0 0 #ffffff, 60px 70px 0 0 #ffffff, 65px 70px 0 0 #303f46, 70px 70px 0 0 #ffffff, 75px 70px 0 0 #ffffff, 80px 70px 0 0 #303f46,/*第十四行*/
 5px 75px 0 0 #303f46, 10px 75px 0 0 #303f46, 15px 75px 0 0 #303f46, 20px 75px 0 0 #ffffff, 25px 75px 0 0 #ffffff, 30px 75px 0 0 #ffffff, 35px 75px 0 0 #ffffff, 40px 75px 0 0 #ffffff, 45px 75px 0 0 #ffffff, 50px 75px 0 0 #ffffff, 55px 75px 0 0 #ffffff, 60px 75px 0 0 #ffffff, 65px 75px 0 0 #ffffff, 70px 75px 0 0 #ffffff, 75px 75px 0 0 #303f46, 80px 75px 0 0 #303f46,/*第十五行*/
 5px 80px 0 0 #607d8b, 10px 80px 0 0 #607d8b, 15px 80px 0 0 #607d8b, 20px 80px 0 0 #607d8b, 25px 80px 0 0 #607d8b, 30px 80px 0 0 #ffffff, 35px 80px 0 0 #ffffff, 40px 80px 0 0 #607d8b, 45px 80px 0 0 #607d8b, 50px 80px 0 0 #607d8b, 55px 80px 0 0 #ffffff, 60px 80px 0 0 #ffffff, 65px 80px 0 0 #607d8b, 70px 80px 0 0 #607d8b, 75px 80px 0 0 #607d8b, 80px 80px 0 0 #607d8b;/*第十六行*/
 height: 5px;
 width: 5px;/*定义单个“像素”大小*/
}

在实际的运用中，可通过只设定关键像素的位置、对空白像素采用不加设定的方法来压缩代码长度。
为方便测试，本段代码由网站Pixel Art to CSS直接生成。

基于老密码盘的文字化改版

很简单的改版方法，基于原英文密码盘，各位可查看源代码，并根据自己的情况进行改版，甚至不局限于文字解密，而是选择通过相近的思想实现多按钮的页面内容转化，或者搞一些更有趣的玩法。这个密码盘的密码是“我是晨茗”，密码输入错误会自动回到开头。
在源码里，W1，R3这些标识可更根据需求改动，这些是用来区分css类的自定义标识符，本身无特殊含义。

[ _{Enter Password} ]

[ * ]

[ * * ]

[ * * * ]

[ _密码正确 ]

我有发
好是平
欧来晨
茗了可
cancelbackspace 我有发
好是平
欧来晨
茗了可
cancelbackspace 我有发
好是平
欧来晨
茗了可
cancelbackspace 我有发
好是平
欧来晨
茗了可
cancelbackspace 我有发
好是平
欧来晨
茗了可
cancelbackspace 我有发
好是平
欧来晨
茗了可
cancelbackspace 我有发
好是平
欧来晨
茗了可
cancelbackspace

解密成功，锵锵~

还有一些byd的想法，比如“左手右手一起慢动作，右手左手慢动作重播”

[ _{Enter Password} ]

[ 动作1 ]

[ 动作1 动作2 ]

[ 动作1 动作2 动作13 ]

[ _动作正确 ]

动动左手动动右手 动动左手动动右手 动动左手动动右手 动动左手动动右手 动动左手动动右手 动动左手动动右手 动动左手动动右手

解密成功，锵锵~

词条页面嵌套测试（测试用例：逆魅鸮）

碎数研相关词条 碎数研编号：[待补充] 该词条由非Phigros作品参与者创建或编辑且不受保护。 由于碎数研本身的性质，请谨慎阅读，同时注意碎数研不具有官方性质。 如词条与已存在的隐性设定冲突，请前往林泊百科编辑建议箱提出。 待完善页面 该词条有待完善。 简介 四级异想，能够在一定时间内提高和降低个体对另一个体的魅力，因其潜在的危害性而在主要楼层被限制存在，目前主要存在于亚空间Decemilia中。 特征 体态特征与生活习性 外观与长耳鸮相似，头顶长有深红色毛发，一般生活在智慧生物聚集区。 逆魅鸮具有不完全实体性，仅在曙暮时分（或具有相似性质的区域时间段）具有实体，并具有与普通长耳鸮相似的行为模式和生命结构。 特殊能力 以实体存在的逆魅鸮会选择视野内的目标并锁定。锁定目标后，逆魅鸮将在短时间内迅速提高目标对另一特定个体的魅力，并在随后的数月内逐渐降低，直到该特定个体对目标产生极大的厌恶。 该特殊效果仅能由以下方式解除： 1. 由发动能力的逆魅鸮主动解除。 2. 发动能力的逆魅鸮死亡。 3. 自发动能力起时间经过一年自动解除。“一年”为主塔定义下的一年所对应的时间（将该段时间长度以t表示）。无论目标处于何等时间流速，目标需度过以目标自身为基准的长度为t的时间，此后效果将自动解除。 逆魅鸮一般倾向于选择具有相互恋爱倾向的男女（或族群中具有类似身份的一对个体）中的一位作为目标，另一位则作为受目标魅力影响的个体。一只逆魅鸮同一时间仅能锁定一个个体作为目标，已成为其他逆魅鸮的目标的个体无法被锁定。

1145141651651651655651

发表于:733/12/32 10:30:24

#15

回复

@

举报

16548646148949841841box-shadow: 630px 10px rgba(0,0,0,255), 640px 10px
rgba(0,0,0,255), 650px 10px rgba(0,0,0,255), 620px 20px rgba(0,0,0,255), 630px 20px rgba(75,91,171,255), 640px 20px rgba(0,0,0,255), 30px 30px rgba(0,0,0,255), 40px 30px rgba(0,0,0,255), 50px 30px rgba(0,0,0,255), 60px 30px rgba(0,0,0,255), 140px 30px rgba(0,0,0,255), 150px 30px rgba(0,0,0,255), 160px 30px rgba(0,0,0,255), 170px 30px rgba(0,0,0,255), 180px 30px rgba(0,0,0,255), 190px 30px rgba(0,0,0,255), 200px 30px rgba(0,0,0,255), 210px 30px rgba(0,0,0,255), 220px 30px rgba(0,0,0,255), 230px 30px rgba(0,0,0,255), 240px 30px rgba(0,0,0,255), 250px 30px rgba(0,0,0,255), 260px 30px rgba(0,0,0,255), 600px 30px
rgba(0,0,0,255), 610px 30px rgba(0,0,0,255), 620px 30px rgba(75,91,171,255), 630px 30px rgba(177,219,227,255), 640px 30px rgba(0,0,0,255), 20px 40px rgba(0,0,0,255), 30px 40px rgba(227,105,86,255), 40px 40px rgba(202,73,63,255), 50px 40px rgba(227,105,86,255), 60px 40px rgba(202,73,63,255), 70px 40px rgba(0,0,0,255), 80px 40px rgba(0,0,0,255), 90px 40px rgba(0,0,0,255), 100px 40px rgba(0,0,0,255), 110px 40px rgba(0,0,0,255), 120px 40px rgba(0,0,0,255), 130px 40px rgba(0,0,0,255), 140px 40px rgba(75,91,171,255), 150px 40px rgba(75,91,171,255), 160px 40px rgba(75,91,171,255), 170px 40px rgba(75,91,171,255), 180px 40px rgba(75,91,171,255), 190px 40px rgba(75,91,171,255), 200px 40px rgba(75,91,171,255), 210px 40px rgba(75,91,171,255)
, 220px 40px rgba(75,91,171,255), 230px 40px rgba(75,91,171,255), 240px 40px rgba(75,91,171,255), 250px 40px rgba(75,91,171,255418964189418964159641848948948948948949489498498489498afnkajhfouiahsfiuhaifbawofbouabfiuoawbifubaibfiasbfiuabiufwbiubsiufbiuabwiufbsiuabfiuabiwufbiusabfa