glitch css

このぺージは削除されていません。

下記ぺージは削除用カテゴリに置かれています。
draft:4053112-44-bfbe

ページを完全に削除するには「オプション」から「削除」を選択し、「ページを完全に削除する」にチェックをいれてから削除してください。

---

構文などの細かい演出は最後にやります。

このページは、過去を知る唯一の記録として保存されます。ページの破損が確認されますが、修整は許可されていません。

アイテム番号: SCP-001　　

オブジェクトクラス: Safe Thaumiel Neutralized　　

特別収容プロトコル: SCP-001はクレフ博士の自宅の金庫にて保管されます。 SCP-001-aへの対抗手段を生成するため、SCP-001に対するあらゆる実験を継続的に行い、可能な限り多くのSCP-001-1を生み出して下さい。 SCP-001はサイト-1にて保管されます。

ああああああああ
ああああああああ
ああああああああ

改行する場合は、

@@@@

を入れて、
class="glitch-5"の部分を次の数字に変えてください。
Wikidot構文はnoise部分にはききません。

#page-content [class^="glitch"] {
  display: inline-block;
  position: relative;
  margin-block: 1em;
}
#page-content [class^="glitch"]+[class^="glitch"],
#page-content [class^="glitch"]+br+[class^="glitch"] {
  margin-block: 0 1em;
}
#page-content [class^="glitch"] p {
  flex: 1;
  line-height: 141%;
  margin: 0;
  color: #333;
  font-size: 1em;
}
#page-content [class^="glitch"]:before, #page-content [class^="glitch"]:after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  filter: drop-shadow(0 0 transparent);
  line-height: 141%;
}
#page-content [class^="glitch"]:before {
  animation: glitch-b 2.3s infinite alternate-reverse;
}
#page-content [class^="glitch"]:after {
  animation: glitch-a 1.7s infinite alternate;
}
@keyframes glitch-a {
  10%, 19%, 30%, 39%, 50%, 59%, 70%, 79%, 90%, 99% {
    transform: translateX(calc( 0 * 100%));
    transform: translateY(calc( 0.005 * 100%));
    text-shadow: 0em 0 0.02em lime, 0 0 0.02em #ff00e1;
  }
  0%, 9% {
    transform: translateX(calc( 0 * 100%));
    transform: translateY(calc( 0 * 100%));
    text-shadow: 0em 0 0.02em lime, 0 0 0.02em #ff00e1;
  }
  20%, 29% {
    transform: translateX(calc( 0.005 * 100%));
    transform: translateY(calc( 0.005 * 100%));
    text-shadow: -0.15em 0 0.02em lime, -0.3em 0 0.02em #ff00e1;
  }
  40%, 49% {
    transform: translateX(calc( -0.01 * 100%));
    transform: translateY(calc( 0.01 * 100%));
    text-shadow: -0.3em 0 0.02em lime, -0.6em 0 0.02em #ff00e1;
  }
  60%, 69% {
    transform: translateX(calc( 0.01 * 100%));
    transform: translateY(calc( 0.07 * 100%));
    text-shadow: -0.09em 0 0.02em lime, -0.18em 0 0.02em #ff00e1;
  }
  80%, 89% {
    transform: translateX(calc( -0.02 * 100%));
    transform: translateY(calc( -0.01 * 100%));
    text-shadow: -0.21em 0 0.02em lime, -0.42em 0 0.02em #ff00e1;
  }
  100% {
    transform: translateX(calc( -0.03 * 100%));
    transform: translateY(calc( 0.03 * 100%));
    text-shadow: -0.249em 0 0.02em lime, -0.498em 0 0.02em #ff00e1;
  }
}
@keyframes glitch-b {
  10%, 19%, 30%, 39%, 50%, 59%, 70%, 79%, 90%, 99% {
    transform: translateX(calc( 0 * 100%));
    transform: translateY(calc( 0.02 * 100%));
    text-shadow: 0em 0 0.02em lime, 0em 0 0.02em #ff00e1;
  }
  0%, 9% {
    transform: translateX(calc( 0 * 100%));
    text-shadow: 0em 0 0.02em lime, 0em 0 0.02em #ff00e1;
  }
  20%, 29% {
    transform: translateX(calc( 0.005 * 100%));
    transform: translateY(calc( 0.01 * 100%));
    text-shadow: -0.015em 0 0.02em lime, -0.03em 0 0.02em #ff00e1;
  }
  40%, 49% {
    transform: translateX(calc( 0.01 * 100%));
    transform: translateY(calc( 0 * 100%));
    text-shadow: -0.03em 0 0.02em lime, -0.06em 0 0.02em #ff00e1;
  }
  60%, 69% {
    transform: translateX(calc( 0.03 * 100%));
    transform: translateY(calc( -0.02 * 100%));
    text-shadow: -0.09em 0 0.02em lime, -0.18em 0 0.02em #ff00e1;
  }
  80%, 89% {
    transform: translateX(calc( -0.02 * 100%));
    transform: translateY(calc( 0 * 100%));
    text-shadow: -0.21em 0 0.02em lime, -0.42em 0 0.02em #ff00e1;
  }
  100% {
    transform: translateX(calc( -0.03 * 100%));
    transform: translateY(calc( 0.02 * 100%));
    text-shadow: -0.249em 0 0.02em lime, -0.498em 0 0.02em #ff00e1;
  }
}
#page-content [class^="glitch"]:after {
  opacity: 0;
}