部分高难度维基源码教程

这里是维基源码教程

（可直接复制）

MC百科吐槽

类似于MC百科吐槽的遮挡文字，鼠标移动到上面才能查看：
[[span style="background-color: #333;"class="blackbox"]]被遮挡文字 [[/span]]
效果：被遮挡文字
注意：页面底部应放置如下代码：
[[module CSS]]
.blackbox {background-color: #333; color: transparent;}
.blackbox:hover {color: #fff;}
[[/module]]
来自某不愿透露姓名的人士：手机端请点击被遮挡文字即可观看

可折叠块

（没错，这很“高难度”）
[[collapsible show="显示" hide="隐藏"]]
被折叠的文字
[[/collapsible]]
效果：

显示

被折叠的文字

包含HTML

我们知道，用include模块可以包含wikidot网站页面。但是其他网站部件呢？
用如下代码：

[[html]]
<iframe src="网页URL" width="宽度，建议100%" height="高度，建议500 allowtransparency="true" frameborder="0"></iframe>
[[/html]]

即可。

聊天室

飘洒的文字

显示代码

[[module CSS]]

.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}

@-webkit-keyframes snowflakes-fall{
0%{
top:-10%
}
100%{
top:100%
}
}
@-webkit-keyframes snowflakes-shake{
0%,100%{
-webkit-transform:translateX(0);
transform:translateX(0)}50%{
-webkit-transform:translateX(80px);
transform:translateX(80px)
}
}
@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}
@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}
.snowflake{
 position:fixed;
 top:-10%;
 z-index:9999;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 cursor:default;
 -webkit-animation-name:snowflakes-fall,snowflakes-shake;
 -webkit-animation-duration:10s,3s;
 -webkit-animation-timing-function:linear,ease-in-out;
 -webkit-animation-iteration-count:infinite,infinite;
 -webkit-animation-play-state:running,running;
 animation-name:snowflakes-fall,snowflakes-shake;
 animation-duration:10s,3s;
 animation-timing-function:linear,ease-in-out;
 animation-iteration-count:infinite,infinite;
 animation-play-state:running,running
}
.snowflake:nth-of-type(0){
 left:1%;
 -webkit-animation-delay:0s,0s;
 animation-delay:0s,0s
}
.snowflake:nth-of-type(1){
 left:10%;
 -webkit-animation-delay:1s,1s;
 animation-delay:1s,1s
}
.snowflake:nth-of-type(2){
 left:20%;
 -webkit-animation-delay:6s,.5s;
 animation-delay:6s,.5s
}
.snowflake:nth-of-type(3){
 left:30%;
 -webkit-animation-delay:4s,2s;
 animation-delay:4s,2s
}
.snowflake:nth-of-type(4){
 left:40%;
 -webkit-animation-delay:2s,2s;
 animation-delay:2s,2s
}
.snowflake:nth-of-type(5){
 left:50%;
 -webkit-animation-delay:8s,3s;
 animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;
-webkit-animation-delay:6s,2s;
animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;
-webkit-animation-delay:2.5s,1s;
animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;
-webkit-animation-delay:1s,0s;
animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;
-webkit-animation-delay:3s,1.5s;
animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;
-webkit-animation-delay:2s,0s;
animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;
-webkit-animation-delay:4s,2.5s;
animation-delay:4s,2.5s
}
[[/module]]
[[div class="snowflakes" aria-hidden="true"]]
  [[div class="snowflake"]]
  🐴
  [[/div]]
[[div class="snowflake"]]
  🐴
  [[/div]]
[[div class="snowflake"]]
  🐴
  [[/div]]
[[div class="snowflake"]]
  🐴
  [[/div]]
 [[div class="snowflake"]]
  🐴
  [[/div]]
[[div class="snowflake"]]
  🐴
  [[/div]]
[[div class="snowflake"]]
  🐴
  [[/div]]
[[div class="snowflake"]]
  🐴
  [[/div]]
 [[div class="snowflake"]]
  🐴
  [[/div]]
[[div class="snowflake"]]
  🐴
  [[/div]]
[[div class="snowflake"]]
  🐴
  [[/div]]
[[div class="snowflake"]]
  🐴
  [[/div]]
[[/div]]

效果就像这样

电脑故障化样式

这部分位于页面顶端：

[[module CSS]]
.containercontainer {position: relative;width: auto;height: auto;border: 2px solid #666;background: #141212;color: #3F3;margin-top: 1em;margin-bottom: 1em;}.containercontainer .container .overlay {background: rgba(51, 255, 51, 0.9);color: #121010;position: absolute;width: auto;height: 50px;top: 0;right: 0;bottom: 0;left: 0;margin: auto;line-height: 50px;display: inline;vertical-align: middle;text-align: center;font-family: Courier New;font-size: 30px;letter-spacing: 5px;font-weight: bolder;z-index: 3;animation: overlay-anim 10s linear;animation-fill-mode: forwards;animation-iteration-count: infinite;}.overlayback {background: rgba(187, 187, 187, 0.5);z-index: 3;position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: auto;height: auto;animation: overlay-anim 10s linear;animation-fill-mode: forwards;animation-iteration-count: infinite;}.containercontainer .container {text-align: center;width: inherit;height: inherit;position: relative;overflow: hidden;}.containercontainer .container::after {content: " ";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(21, 19, 19, 0.2);opacity: 0;z-index: 2;animation: flicker 0.15s infinite;}.containercontainer .container::before {content: " ";display: block;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: linear-gradient(rgba(18, 16, 16, 0.03) 50%, rgba(0, 0, 0, 0.45) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.22), rgba(0, 255, 0, 0.11), rgba(0, 0, 255, 0.22));z-index: 2;background-size: 100% 2px, 3px 100%;}.no-unfold {text-align: center;}.container h1,.container h2,.container h3,.container h5,.container h6 {color: #3F3;}.container hr {border-top: 1px dotted #3F3;border-bottom: none;}.container hr {border-top: 1px solid #3F3;border-bottom: 1px solid #3F3;color: transparent;background-color: transparent;}.container hr:after {display: block;margin-top: 2px;border-top: 1px solid #3F3;border-bottom: 1px solid #3F3;}.blinkbar {animation: blink 1.5s infinite; letter-spacing: -0.13em;}@keyframes blink{to{opacity: .0;}}@keyframes flicker {0% {opacity: 0.9890; }5% {opacity: 0.5842; }10% {opacity: 0.9865; }15% {opacity: 0.0412; }20% {opacity: 0.6255; }25% {opacity: 0.3157; }30% {opacity: 0.7328; }35% {opacity: 0.4654; }40% {opacity: 0.9128; }45% {opacity: 0.2449; }50% {opacity: 0.5485; }55% {opacity: 0.6438; }60% {opacity: 0.1180; }65% {opacity: 0.9085; }70% {opacity: 0.0266; }75% {opacity: 0.6795; }80% {opacity: 0.7812; }85% {opacity: 0.0117; }90% {opacity: 0.2239; }95% {opacity: 0.8897; }100% {opacity: 0.2260; }}@keyframes overlay-anim {0% {visibility: hidden; }10% {visibility: hidden; }11% {visibility: visible; }50% {visibility: hidden; }100% {visibility: hidden; }}
[[/module]]

这部分位于文字出现的位置：

[[div class="no-unfold"]]
[[div class="containercontainer"]]
[[div class="container"]]
+* [!-- 请勿删除此 "+*"。 --]
[[span_ class="overlay"]]
以及更多！
[[/span]]
[[div_ class="overlayback"]]
[[/div]]

文本
文本
文本
更多文本
还是更多文本
又是更多文本
只有更多文本
能不能不要再来更多文本了！

更多[[span class="blinkbar"]][][[/span]]

[[/div]]
[[/div]]
[[/div]]

效果

以及更多！

文本
文本
文本
更多文本
还是更多文本
又是更多文本
只有更多文本
能不能不要再来更多文本了！

更多[]