用户:晨茗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

解密成功，锵锵~