|
|
| (未显示同一用户的10个中间版本) |
| 第2行: |
第2行: |
| <templatestyles src="模板:黑幕/黑幕.css" /><br> | | <templatestyles src="模板:黑幕/黑幕.css" /><br> |
|
| |
|
| 晨茗biu~的个人css沙盒,用于本人的部分css测试。<br>
| | 晨茗biu~的个人沙盒,用于本人的部分技术和猜想测试。<br> |
| 测试成功的代码可能会保留,可供各位随意参考或使用。<br> | | 测试成功的代码可能会保留,可供各位随意参考或使用。<br> |
| ==像素画== | | ==像素画== |
| 一个像素画:<br>
| | |
| <div class="pixelart-to-css"></div>
| | ==一些解析器函数的测试== |
| <br><br><br><br><br>
| | {{#ifeq:{{#time:m-d|now + 8 hours}}|04-19|一段和系统时间相关的测试代码,用的参数是我的生日。你能看到这一段说明今天就是我的生日,祝我生日快乐!|一段和系统时间相关的测试代码,用的参数是我的生日。你能看到这一段说明今天不是我的生日。}} |
| 代码解释:用box-shadow属性填充色块。box-shadow为一种针对图形的阴影属性,该属性可在类型定义中通过调整阴影位置来同时创建多个色块,可简化代码复杂度。该属性的用法为<nowiki>box-shadow: offset-x offset-y blur-radius spread-radius color</nowiki>,其中“blur-radius”“spread-radius”用于调整阴影的模糊程度,在像素画实现中填0或不填(本段代码使用工具直接生成,因此这两个参数都填了0,实际上不填也是没问题的)。“offset-x”“offset-y”分别定义了阴影的在两个方向的偏移距离,单位为“px”,在本段代码中为调整色块的位置。<br>
| | |
| 示例代码:<br>
| | ==基于TreeButton常规密码盘的文字化改版== |
| {| class="mw-collapsible mw-collapsed wikitable" | | {| class="mw-collapsible mw-collapsed wikitable" |
| !colspan="1"| 示例代码 | | ! 基于TreeButton本体设计的密码盘的魔改方案 |
| |- | | |- |
| | | | | |
| .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;/*定义单个“像素”大小*/
| |
| }<br>
| |
| |}
| |
| 在实际的运用中,可通过只设定关键像素的位置、对空白像素采用不加设定的方法来压缩代码长度。<br>
| |
| 为方便测试,本段代码由网站[https://pixelartcss.com/ Pixel Art to CSS]直接生成。<br>
| |
|
| |
| <div class="container-qiuyudao-daoren"><div class="qiuyudao-daoren"></div></div><br>
| |
| <div class="container-qiuyudao-daoqiao"><div class="qiuyudao-daoqiao"></div></div><br>
| |
| <div class="container-qiuyudao"><div class="qiuyudao"></div></div><br>
| |
| ==基于老密码盘的文字化改版==
| |
| 很简单的改版方法,基于原英文密码盘,各位可查看源代码,并根据自己的情况进行改版,甚至不局限于文字解密,而是选择通过相近的思想实现多按钮的页面内容转化,或者搞一些更有趣的玩法。这个密码盘的密码是“我是晨茗”,密码输入错误会自动回到开头。<br> | | 很简单的改版方法,基于原英文密码盘,各位可查看源代码,并根据自己的情况进行改版,甚至不局限于文字解密,而是选择通过相近的思想实现多按钮的页面内容转化,或者搞一些更有趣的玩法。这个密码盘的密码是“我是晨茗”,密码输入错误会自动回到开头。<br> |
| 在源码里,W1,R3这些标识可更根据需求改动,这些是用来区分css类的自定义标识符,本身无特殊含义。 | | 在源码里,W1,R3这些标识可更根据需求改动,这些是用来区分css类的自定义标识符,本身无特殊含义。 |
| 第106行: |
第76行: |
| </div> | | </div> |
| </center> | | </center> |
| | |} |
| | ==词条套词条== |
| | 一个看看词条页面内部能否直接放其他词条的完整内容的测试,实测下来会导致自动生成的目录体系的混乱,建议关闭自动生成的目录。 |
| {| class="mw-collapsible mw-collapsed wikitable" | | {| class="mw-collapsible mw-collapsed wikitable" |
| !colspan="1"| 词条页面嵌套测试(测试用例:[[逆魅鸮]]) | | !colspan="1"| 词条页面嵌套测试(测试用例:[[逆魅鸮]]) |
| 第128行: |
第101行: |
|
| |
|
| |} | | |} |
| | ==土星论坛模板测试== |
| 为土星论坛设计的模板用例: | | 为土星论坛设计的模板用例: |
| {{SaturnForum|晨茗|488/9/27 01:54:52|17|一段来自土星论坛的留言}} | | {{SaturnForum|晨茗|488/9/27 01:54:52|17|一段来自土星论坛的留言}} |
| 第143行: |
第117行: |
| }} | | }} |
| <poem> | | <poem> |
| <span class="DarkShroud DarkShroud-text" title="你知道的太多了" style="color: white;">文本</span> | | ==黑幕新模板测试== |
| <span class="DarkShroud DarkShroud-text" title="你知道的太少了" style="color: white;">[[文本]]</span> | | <span class="DarkShroud" title="你知道的太多了"><span class="DarkShroud-text">文本</span></span> |
| <span class="DarkShroud DarkShroud-text" title="你无所不知" style="color: white;">[[逆魅鸮]]</span> | | <span class="DarkShroud" title="你知道的太少了"><span class="DarkShroud-text">[[文本]]</span></span> |
| <span class="DarkShroud DarkShroud-text" title="你一无所知" style="color: green;">逆魅鸮</span> | | <span class="DarkShroud" title="你无所不知"><span class="DarkShroud-text">[[逆魅鸮]]</span></span> |
| | <span class="DarkShroud" title="你一无所知"><span class="DarkShroud-text">逆魅鸮</span></span> |
| </poem> | | </poem> |
| | |
| | ==新密码盘测试== |
| | {{密码盘 |
| | | correct = Q,W,E |
| | | target = doc-a |
| | }} |
| | {{密码盘/内容 |
| | | key = doc-a |
| | | content = '''解锁成功!'''这是被隐藏的内容。 |
| | }} |
| | |
| | ===与VNP的兼容测试=== |
| | {{密码盘 |
| | | correct = 0,0,1;0,0,2 |
| | | target = tem-1; tem-2 |
| | | symbols = 1,2,3,4,5,6,7,8,9,0 |
| | | length = 3 |
| | | layout = 3,3,3,1 |
| | | title = test |
| | | hint = 终端测试序号001或002 |
| | | autohide= 1 |
| | }} |
| | |
| | {{密码盘/内容|key=tem-1 lw-treediv P1|content=test终端1{{VNP-F|1 pd-secret pd-secret-tem-1|2|夏天的飞鸟,飞到我窗前唱歌,又飞去了。|秋天的黄叶,它们没有什么可唱,只叹息一声,飞落在那里。||}}}} |
| | {{密码盘/内容|key=tem-2 lw-treediv P2|content=test终端2{{VNP-F|2 pd-secret pd-secret-tem-2|1|警告:发生故障故障故障故障故障故障故障故障故障故障故障故障故障故障故障故障故障故障故障故障故障故障|“干涸的河床并不感谢它的过去。”||}}}} |