10009

+ 開く

Code.1

[[div class="anima"]]
[[div class="collapsible-block"]]
[[div class="collapsible-block-folded" style="display: block;"]]
[[a class="collapsible-block-link" href="#fnwvne90siha"]][[/a]]
[[/div]]
[[div class="collapsible-block-unfolded" style="display: none;"]]
[[div class="collapsible-block-unfolded-link"]]
[[a class="collapsible-block-link batsu" href="#2hr38efqw9aoi" style="display:inline-block;background:#ededed;border:1px solid #bfbfbf;padding:3.5px;text-align:center;color:#9c9c9c;text-decoration: none;"]][[/a]]
[[/div]]
[[div class="collapsible-block-content" style="display: block;"]]
[[image http://scp-jp-sandbox3.wikidot.com/local--files/draft:6353466-36-f860/CM.png]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]

Code.2

[[module css]]
#page-content .anima {
    position: fixed;
    height: auto;
    width:100%;
    max-width: 900px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    animation-name: koukoku;
    animation-duration: 7.5s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
}
.anima br {
    display:none;
}
.anima img {
    width:100%;
}
.collapsible-block-unfolded-link p {
    margin-block-start: 0em !important;
    margin-block-end: 0em !Important;
}
li,p {
    line-height: 100%;
}
.anime * {
  box-sizing: border-box;
}
@keyframes koukoku {
0% {
    opacity: 0;
    bottom:100%;
}
7% {
    opacity: 0;
}
76% {
    opacity: 1;
}
84%,100% {
    opacity: 1;
    bottom: 0%;
}
}
.batsu::after  {
  content: '✕';
  font-weight:bold;
}
[[/module]]