网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发 > css

css实现黑客帝国流星字动画特效

2022/6/3 18:46:00

黑客帝国想必大家都看过,除了电影,里面片头的文字特效也让我记忆犹新,今天我们就用css实现一个黑客帝国流星字动画特效。<html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" …

        黑客帝国想必大家都看过,除了电影,里面片头的文字特效也让我记忆犹新,今天我们就用css实现一个黑客帝国流星字动画特效。

image.png

<html>
<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" type="image/png"
    href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
  <meta name="apple-mobile-web-app-title" content="CodePen">
  <link rel="shortcut icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
  <link rel="mask-icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
    color="#111">
  <title>css实现黑客帝国流星字动画特效www.woaidaogu.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <style>
    @charset "UTF-8";
    @import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&display=swap");
    body,
    p {
      margin: 0;
      padding: 0;
    }
    body,
    html {
      width: 100%;
      height: 100%;
      background: #000;
      display: flex;
      overflow: hidden;
    }
    .g-container {
      width: 100vw;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      flex-direction: row;
      font-family: "Inconsolata", monospace, sans-serif;
    }
    p {
      position: relative;
      width: 5vh;
      height: 100vh;
      text-align: center;
      font-size: 5vh;
      word-break: break-all;
      white-space: pre-wrap;
    }
    p::before,
    p::after {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      overflow: hidden;
    }
    p:nth-child(0)::before {
      content: "ぃきㄛはyzヴひ◄vヰwdひコ◁▤*ㄒㄎwィヱヵㄑ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-0 4.8s steps(20, end) -0.6s infinite;
      animation: typing-0 4.8s steps(20, end) -0.6s infinite;
      z-index: 1;
    }
    p:nth-child(0)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.63), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.8s infinite -0.4s linear;
      animation: mask 4.8s infinite -0.4s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-0 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄟかモㄣてのほ◁ョにょほ▤けㄙㄠホほㄤ<に9bクヒ";
      }
    }
    @keyframes typing-0 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄟかモㄣてのほ◁ョにょほ▤けㄙㄠホほㄤ<に9bクヒ";
      }
    }
    p:nth-child(1)::before {
      content: "ㄔieㄈョんはg♦ぁ#ィサ▦ょgㄜㄍぁナフノへㄓそ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-1 3.5s steps(20, end) -2.5s infinite;
      animation: typing-1 3.5s steps(20, end) -2.5s infinite;
      z-index: 1;
    }
    p:nth-child(1)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.97), rgba(0, 0, 0, 0.97), rgba(0, 0, 0, 0.97), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.5s infinite -2.3s linear;
      animation: mask 3.5s infinite -2.3s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-1 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ネㄅㄍd▧ヵた♥▥ぉ6ㄔㄩァチュンㄠㄘゅコ7なㄑッ";
      }
    }
    @keyframes typing-1 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ネㄅㄍd▧ヵた♥▥ぉ6ㄔㄩァチュンㄠㄘゅコ7なㄑッ";
      }
    }
    p:nth-child(2)::before {
      content: "かy%ㄑuㄅっw^ヘメwㄚqさしサㄒsふす2*5ム";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-2 4s steps(20, end) -4.3s infinite;
      animation: typing-2 4s steps(20, end) -4.3s infinite;
      z-index: 1;
    }
    p:nth-child(2)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.66), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4s infinite -4.1s linear;
      animation: mask 4s infinite -4.1s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-2 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "◄もㄩ<esycqㄚスつ@ㄗハせゅmゑㄥ7たiカへ";
      }
    }
    @keyframes typing-2 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "◄もㄩ<esycqㄚスつ@ㄗハせゅmゑㄥ7たiカへ";
      }
    }
    p:nth-child(3)::before {
      content: "ㄔゐㄧㄔ▤ゐ◁ソサニm*d◁8_9qㄗ>つyンしㄈ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-3 3.8s steps(20, end) -4.8s infinite;
      animation: typing-3 3.8s steps(20, end) -4.8s infinite;
      z-index: 1;
    }
    p:nth-child(3)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.83), rgba(0, 0, 0, 0.83), rgba(0, 0, 0, 0.83), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.8s infinite -4.6s linear;
      animation: mask 3.8s infinite -4.6s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-3 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ェヒyヘマぬ8xㄕのコkメt►v^ケㄈトㄜㄋも5ハ";
      }
    }
    @keyframes typing-3 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ェヒyヘマぬ8xㄕのコkメt►v^ケㄈトㄜㄋも5ハ";
      }
    }
    p:nth-child(4)::before {
      content: "9せhェt▧キヶgェキっミlgdkoみbまㄕ7そ*";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-4 3.9s steps(20, end) -1.1s infinite;
      animation: typing-4 3.9s steps(20, end) -1.1s infinite;
      z-index: 1;
    }
    p:nth-child(4)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.9s infinite -0.9s linear;
      animation: mask 3.9s infinite -0.9s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-4 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "▨ノは_oぉaㄞㄈぉ▥ヵ♀ㄥㄕケめネvn▧ㄖゎ♦ぉ";
      }
    }
    @keyframes typing-4 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "▨ノは_oぉaㄞㄈぉ▥ヵ♀ㄥㄕケめネvn▧ㄖゎ♦ぉ";
      }
    }
    p:nth-child(5)::before {
      content: "eヌ4ィシㄈち4ㄠ7hかㄡx▥ヱスぇみょㄛとェヲㄚ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-5 4.1s steps(20, end) -4.7s infinite;
      animation: typing-5 4.1s steps(20, end) -4.7s infinite;
      z-index: 1;
    }
    p:nth-child(5)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.84), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.1s infinite -4.5s linear;
      animation: mask 4.1s infinite -4.5s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-5 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄥは5<ㄞま▧ぉすㄕkまけz9のェmㄜㄆgㄈiヌb";
      }
    }
    @keyframes typing-5 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄥは5<ㄞま▧ぉすㄕkまけz9のェmㄜㄆgㄈiヌb";
      }
    }
    p:nth-child(6)::before {
      content: "をヶっpuへカスュカnネチㄩねbハケゃゐㄉuㄦ►ㄖ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-6 4.2s steps(20, end) -4.1s infinite;
      animation: typing-6 4.2s steps(20, end) -4.1s infinite;
      z-index: 1;
    }
    p:nth-child(6)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.94), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.2s infinite -3.9s linear;
      animation: mask 4.2s infinite -3.9s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-6 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "<@むゎョ$◄んせ8▦▧ㄉㄣゃメ◄♦$▤rゥキ►ㄩ";
      }
    }
    @keyframes typing-6 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "<@むゎョ$◄んせ8▦▧ㄉㄣゃメ◄♦$▤rゥキ►ㄩ";
      }
    }
    p:nth-child(7)::before {
      content: "3つケㄓr8ま▤さっぇㄩ%◄ㄜ♂▣ㄏvさ▦_こせ◁";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-7 3.5s steps(20, end) -2.3s infinite;
      animation: typing-7 3.5s steps(20, end) -2.3s infinite;
      z-index: 1;
    }
    p:nth-child(7)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.5s infinite -2.1s linear;
      animation: mask 3.5s infinite -2.1s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-7 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄝpた_み◄ねq<ㄦと8ㄔンさこゑニほクフㄍつ$の";
      }
    }
    @keyframes typing-7 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄝpた_み◄ねq<ㄦと8ㄔンさこゑニほクフㄍつ$の";
      }
    }
    p:nth-child(8)::before {
      content: "ㄤqeもㄇㄇ&コ5ねてヴ4の_すっソし_♀ふㄉゎィ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-8 3.8s steps(20, end) -2.6s infinite;
      animation: typing-8 3.8s steps(20, end) -2.6s infinite;
      z-index: 1;
    }
    p:nth-child(8)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.74), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.8s infinite -2.4s linear;
      animation: mask 3.8s infinite -2.4s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-8 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "<ㄨナッ&eメㄒヱㄆtlェネ3そみゎヒぉ_ナぃ▥*";
      }
    }
    @keyframes typing-8 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "<ㄨナッ&eメㄒヱㄆtlェネ3そみゎヒぉ_ナぃ▥*";
      }
    }
    p:nth-child(9)::before {
      content: "ㄡㄥゃヱゥなvくゐゅㄕさクま<ヒ6ねㄠnㄐのソㄏ☻";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-9 4.2s steps(20, end) -1.7s infinite;
      animation: typing-9 4.2s steps(20, end) -1.7s infinite;
      z-index: 1;
    }
    p:nth-child(9)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.91), rgba(0, 0, 0, 0.91), rgba(0, 0, 0, 0.91), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.2s infinite -1.5s linear;
      animation: mask 4.2s infinite -1.5s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-9 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄏャヰょ♀ひgふつメけㄓㄤ▦ㄨ▨ハャちタgムせㄩし";
      }
    }
    @keyframes typing-9 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄏャヰょ♀ひgふつメけㄓㄤ▦ㄨ▨ハャちタgムせㄩし";
      }
    }
    p:nth-child(10)::before {
      content: "hㄞちa▥ㄡし7ぇニァㄣきㄔくㄐカテュひゥツ▥とま";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-10 4.5s steps(20, end) -1.8s infinite;
      animation: typing-10 4.5s steps(20, end) -1.8s infinite;
      z-index: 1;
    }
    p:nth-child(10)::after {
      content: "";
      background: linear-gradient(black, black, black, transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.5s infinite -1.6s linear;
      animation: mask 4.5s infinite -1.6s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-10 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ニ♀ァㄦㄍ☻ㄓにpfこㄕ2ょ▧ヘ1とㄨ▨しゅbㄣっ";
      }
    }
    @keyframes typing-10 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ニ♀ァㄦㄍ☻ㄓにpfこㄕ2ょ▧ヘ1とㄨ▨しゅbㄣっ";
      }
    }
    p:nth-child(11)::before {
      content: "セㄘhす▦ㄩ_ゥン7トナㄞしtゃぉㄘンㄅてㄡpけサ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-11 3.8s steps(20, end) -1s infinite;
      animation: typing-11 3.8s steps(20, end) -1s infinite;
      z-index: 1;
    }
    p:nth-child(11)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.81), rgba(0, 0, 0, 0.81), rgba(0, 0, 0, 0.81), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.8s infinite -0.8s linear;
      animation: mask 3.8s infinite -0.8s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-11 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ヱㄘャㄎょタ6ㄈㄆㄗォ▧ヴㄢiむ◄ョし9ㄏョㄣゃォ";
      }
    }
    @keyframes typing-11 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ヱㄘャㄎょタ6ㄈㄆㄗォ▧ヴㄢiむ◄ョし9ㄏョㄣゃォ";
      }
    }
    p:nth-child(12)::before {
      content: "ㄗㄦㄞゎさ◄ヵキb$ャsせはスネしケョㄥㄅュぉゥさ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-12 4.1s steps(20, end) -3.9s infinite;
      animation: typing-12 4.1s steps(20, end) -3.9s infinite;
      z-index: 1;
    }
    p:nth-child(12)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.91), rgba(0, 0, 0, 0.91), rgba(0, 0, 0, 0.91), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.1s infinite -3.7s linear;
      animation: mask 4.1s infinite -3.7s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-12 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄖハヮンtもㄔマコへぃ<ㄜㄘㄈㄇ6たハ%ㄉ4ぁㄧを";
      }
    }
    @keyframes typing-12 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄖハヮンtもㄔマコへぃ<ㄜㄘㄈㄇ6たハ%ㄉ4ぁㄧを";
      }
    }
    p:nth-child(13)::before {
      content: "xㄢトㄤノ$せチ&ゑ_ま2ㄜメㄢむすぅ#こサみのㄅ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-13 3.1s steps(20, end) -0.1s infinite;
      animation: typing-13 3.1s steps(20, end) -0.1s infinite;
      z-index: 1;
    }
    p:nth-child(13)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.1s infinite 0.1s linear;
      animation: mask 3.1s infinite 0.1s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-13 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ぅせぃ♥ぁkㄟとネゥ♂カひス▦<ゃ♦ィほb8ぬ%ェ";
      }
    }
    @keyframes typing-13 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ぅせぃ♥ぁkㄟとネゥ♂カひス▦<ゃ♦ィほb8ぬ%ェ";
      }
    }
    p:nth-child(14)::before {
      content: "+ョbㄐミゃぃヮ1@キスㄛすseシゥふiㄐェン>は";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-14 4.5s steps(20, end) -1.3s infinite;
      animation: typing-14 4.5s steps(20, end) -1.3s infinite;
      z-index: 1;
    }
    p:nth-child(14)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.5s infinite -1.1s linear;
      animation: mask 4.5s infinite -1.1s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-14 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄟツaノハ3▣ゃgスしㄒ♂ネayrㄋf▧bㄇン8ク";
      }
    }
    @keyframes typing-14 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄟツaノハ3▣ゃgスしㄒ♂ネayrㄋf▧bㄇン8ク";
      }
    }
    p:nth-child(15)::before {
      content: "#みフサちなはㄠㄜぅスぬㄒヲㄙッミヶrと%ヴんハ►";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-15 3.3s steps(20, end) -3.6s infinite;
      animation: typing-15 3.3s steps(20, end) -3.6s infinite;
      z-index: 1;
    }
    p:nth-child(15)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.3s infinite -3.4s linear;
      animation: mask 3.3s infinite -3.4s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-15 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ィ&ㄋ♂ぬㄓふムっ*ㄠモ7ヮぬㄢㄥㄍiㄎㄛㄉtヮひ";
      }
    }
    @keyframes typing-15 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ィ&ㄋ♂ぬㄓふムっ*ㄠモ7ヮぬㄢㄥㄍiㄎㄛㄉtヮひ";
      }
    }
    p:nth-child(16)::before {
      content: "ㄛvㄈェゐ5きさ*ㄕミzハㄍ▣ノくㄩㄕ▧んサcァヲ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-16 4.3s steps(20, end) -3.5s infinite;
      animation: typing-16 4.3s steps(20, end) -3.5s infinite;
      z-index: 1;
    }
    p:nth-child(16)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.3s infinite -3.3s linear;
      animation: mask 4.3s infinite -3.3s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-16 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ほwヰょぅoヌ^へwㄜォsかヴこノㄡは▧ㄦ2キ3ㄋ";
      }
    }
    @keyframes typing-16 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ほwヰょぅoヌ^へwㄜォsかヴこノㄡは▧ㄦ2キ3ㄋ";
      }
    }
    p:nth-child(17)::before {
      content: "zくス♥▥▥ㄙu☻コツチスヲモㄓ♥はめㄍネクiにヌ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-17 3.5s steps(20, end) -4.1s infinite;
      animation: typing-17 3.5s steps(20, end) -4.1s infinite;
      z-index: 1;
    }
    p:nth-child(17)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.94), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.5s infinite -3.9s linear;
      animation: mask 3.5s infinite -3.9s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-17 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "むィけㄏふぇェすょけ▤+ㄙトふ+ㄕㄠそㄣ▥ほㄇbㄕ";
      }
    }
    @keyframes typing-17 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "むィけㄏふぇェすょけ▤+ㄙトふ+ㄕㄠそㄣ▥ほㄇbㄕ";
      }
    }
    p:nth-child(18)::before {
      content: "メたにん+ゃヌゥfめゎg*7ホハヲuヌ2♂ㄍ#ッた";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-18 4.1s steps(20, end) -4.8s infinite;
      animation: typing-18 4.1s steps(20, end) -4.8s infinite;
      z-index: 1;
    }
    p:nth-child(18)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.76), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.1s infinite -4.6s linear;
      animation: mask 4.1s infinite -4.6s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-18 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "_サ%ㄍ◁をめ1aトゑㄓコiふ▧メ►タてタ▣チまノ";
      }
    }
    @keyframes typing-18 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "_サ%ㄍ◁をめ1aトゑㄓコiふ▧メ►タてタ▣チまノ";
      }
    }
    p:nth-child(19)::before {
      content: "くィw%▣ィヮ@aもせeケこ$ゑファ▧hㄧスヲむき";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-19 3.7s steps(20, end) -2.6s infinite;
      animation: typing-19 3.7s steps(20, end) -2.6s infinite;
      z-index: 1;
    }
    p:nth-child(19)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.64), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.7s infinite -2.4s linear;
      animation: mask 3.7s infinite -2.4s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-19 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ョ▥iむㄅ♥ケゥョゥㄦyニㄦノaㄕぇㄤタe_ㄜゎㄖ";
      }
    }
    @keyframes typing-19 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ョ▥iむㄅ♥ケゥョゥㄦyニㄦノaㄕぇㄤタe_ㄜゎㄖ";
      }
    }
    p:nth-child(20)::before {
      content: "ㄤㄅゅㄎ▤ゅくㄤヶホッㄍd8vdㄊャㄔぇ▧▥ㄔgナ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-20 4.8s steps(20, end) -2s infinite;
      animation: typing-20 4.8s steps(20, end) -2s infinite;
      z-index: 1;
    }
    p:nth-child(20)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.8s infinite -1.8s linear;
      animation: mask 4.8s infinite -1.8s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-20 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ょ>ㄍぅㄜㄊㄘモトテㄩュケ▥こン&▤ヱpヲゑ*aヵ";
      }
    }
    @keyframes typing-20 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ょ>ㄍぅㄜㄊㄘモトテㄩュケ▥こン&▤ヱpヲゑ*aヵ";
      }
    }
    p:nth-child(21)::before {
      content: "ゐ+b▧スヲひュ♦ぉlㄑㄙ7フㄅ▤もㄊテ6ㄙサ♀ぅ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-21 3.3s steps(20, end) -4.8s infinite;
      animation: typing-21 3.3s steps(20, end) -4.8s infinite;
      z-index: 1;
    }
    p:nth-child(21)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.76), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.3s infinite -4.6s linear;
      animation: mask 3.3s infinite -4.6s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-21 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ホ►ㄔみみさもハ8さサも3フヮ♥ㄒmすニgㄇ<n4";
      }
    }
    @keyframes typing-21 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ホ►ㄔみみさもハ8さサも3フヮ♥ㄒmすニgㄇ<n4";
      }
    }
    p:nth-child(22)::before {
      content: "♥フaヱフゅㄛコu+そㄒにㄞみさusヲ▧*せ♥ヵひ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-22 3.3s steps(20, end) -1.9s infinite;
      animation: typing-22 3.3s steps(20, end) -1.9s infinite;
      z-index: 1;
    }
    p:nth-child(22)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.3s infinite -1.7s linear;
      animation: mask 3.3s infinite -1.7s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-22 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ぁヰ6@ㄊoㄜニwたノ▧eせゑュdュㄙヴhナほ*め";
      }
    }
    @keyframes typing-22 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ぁヰ6@ㄊoㄜニwたノ▧eせゑュdュㄙヴhナほ*め";
      }
    }
    p:nth-child(23)::before {
      content: "%ほㄦとンㄉぉサをoテみ9キㄋl>♀<#けㄧn+ㄎ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-23 4.9s steps(20, end) -0.4s infinite;
      animation: typing-23 4.9s steps(20, end) -0.4s infinite;
      z-index: 1;
    }
    p:nth-child(23)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.9s infinite -0.2s linear;
      animation: mask 4.9s infinite -0.2s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-23 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄧg♂をつヮァㄩクとィさツけ▣6ぁョかㄠ♂_a9ヴ";
      }
    }
    @keyframes typing-23 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄧg♂をつヮァㄩクとィさツけ▣6ぁョかㄠ♂_a9ヴ";
      }
    }
    p:nth-child(24)::before {
      content: "▤ㄎgㄊヶgつんぬi♂ォㄡㄛnnㄡほㄐㄊㄤㄣㄞネも";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-24 3.6s steps(20, end) -1.1s infinite;
      animation: typing-24 3.6s steps(20, end) -1.1s infinite;
      z-index: 1;
    }
    p:nth-child(24)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.6s infinite -0.9s linear;
      animation: mask 3.6s infinite -0.9s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-24 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄙㄈそヲメフ>oㄧさy*み4のntぁㄈ►pgvぇㄟ";
      }
    }
    @keyframes typing-24 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄙㄈそヲメフ>oㄧさy*み4のntぁㄈ►pgvぇㄟ";
      }
    }
    p:nth-child(25)::before {
      content: "q_rは^つ%7ぃh1ょそ*ャ◄っv♂ナヒヴㄚヘゐ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-25 4.1s steps(20, end) -0.2s infinite;
      animation: typing-25 4.1s steps(20, end) -0.2s infinite;
      z-index: 1;
    }
    p:nth-child(25)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.1s infinite 0s linear;
      animation: mask 4.1s infinite 0s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-25 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄈミサvト6ㄍょニ^ャㄇクちミぅㄢけ▦ヒ6☻ケゃも";
      }
    }
    @keyframes typing-25 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄈミサvト6ㄍょニ^ャㄇクちミぅㄢけ▦ヒ6☻ケゃも";
      }
    }
    p:nth-child(26)::before {
      content: "ㄍそ▣o5nㄚoㄉlの▧kて1マュgd7^コゅtヱ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-26 3.6s steps(20, end) -3.1s infinite;
      animation: typing-26 3.6s steps(20, end) -3.1s infinite;
      z-index: 1;
    }
    p:nth-child(26)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.71), rgba(0, 0, 0, 0.71), rgba(0, 0, 0, 0.71), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.6s infinite -2.9s linear;
      animation: mask 3.6s infinite -2.9s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-26 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ュヵqv8トせㄧゅォ96&&♦とかㄇァ<ㄛe♦ㄉp";
      }
    }
    @keyframes typing-26 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ュヵqv8トせㄧゅォ96&&♦とかㄇァ<ㄛe♦ㄉp";
      }
    }
    p:nth-child(27)::before {
      content: "もすㄆメㄠ&ァnみ7◁ㄝヒもpンィ8ち♥qㄏヲかェ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-27 4.3s steps(20, end) -3.6s infinite;
      animation: typing-27 4.3s steps(20, end) -3.6s infinite;
      z-index: 1;
    }
    p:nth-child(27)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.64), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.3s infinite -3.4s linear;
      animation: mask 4.3s infinite -3.4s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-27 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "♀fㄟㄣuッんニま▧ネgゎ<ㄆチき♦にょnㄇほ▧コ";
      }
    }
    @keyframes typing-27 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "♀fㄟㄣuッんニま▧ネgゎ<ㄆチき♦にょnㄇほ▧コ";
      }
    }
    p:nth-child(28)::before {
      content: "▨vㄐァ_1チ9けゐハゃㄗ%ㄠにィiㄡヌㄜニせ6ㄑ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-28 3.8s steps(20, end) -2.6s infinite;
      animation: typing-28 3.8s steps(20, end) -2.6s infinite;
      z-index: 1;
    }
    p:nth-child(28)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.61), rgba(0, 0, 0, 0.61), rgba(0, 0, 0, 0.61), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.8s infinite -2.4s linear;
      animation: mask 3.8s infinite -2.4s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-28 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄨummㄅへヵつめㄥチ♥5xbㄢ♦ㄋieㄓㄖ♂5y";
      }
    }
    @keyframes typing-28 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄨummㄅへヵつめㄥチ♥5xbㄢ♦ㄋieㄓㄖ♂5y";
      }
    }
    p:nth-child(29)::before {
      content: "ㄘvcfゑㄢ+かマmヲヒ◄ㄣㄗㄦケのマrㄋ$コ+こ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-29 4.4s steps(20, end) -2.1s infinite;
      animation: typing-29 4.4s steps(20, end) -2.1s infinite;
      z-index: 1;
    }
    p:nth-child(29)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.4s infinite -1.9s linear;
      animation: mask 4.4s infinite -1.9s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-29 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ヮㄤo▦oしつㄝそにしむceゎぇミぅッコuけしs1";
      }
    }
    @keyframes typing-29 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ヮㄤo▦oしつㄝそにしむceゎぇミぅッコuけしs1";
      }
    }
    p:nth-child(30)::before {
      content: "ㄉcf♀キヮきvㄛgㄎケヴミォネnㄎタ6ㄕ>ちgヵ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-30 3.4s steps(20, end) -0.9s infinite;
      animation: typing-30 3.4s steps(20, end) -0.9s infinite;
      z-index: 1;
    }
    p:nth-child(30)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.71), rgba(0, 0, 0, 0.71), rgba(0, 0, 0, 0.71), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.4s infinite -0.7s linear;
      animation: mask 3.4s infinite -0.7s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-30 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄎ$eヵ►ュㄦㄇすタ▧ㄨfpせニぃoiか6bのg▣";
      }
    }
    @keyframes typing-30 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄎ$eヵ►ュㄦㄇすタ▧ㄨfpせニぃoiか6bのg▣";
      }
    }
    p:nth-child(31)::before {
      content: "ミxㄡんdんㄈㄨメしヌちゃ►ン◄トㄛㄅかマスㄆンモ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-31 4.1s steps(20, end) -2.7s infinite;
      animation: typing-31 4.1s steps(20, end) -2.7s infinite;
      z-index: 1;
    }
    p:nth-child(31)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.1s infinite -2.5s linear;
      animation: mask 4.1s infinite -2.5s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-31 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ゑヴ8♥す_ㄩむw<+むㄓィㄅミぃ<%▥▣ヱxヰ_";
      }
    }
    @keyframes typing-31 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ゑヴ8♥す_ㄩむw<+むㄓィㄅミぃ<%▥▣ヱxヰ_";
      }
    }
    p:nth-child(32)::before {
      content: "nゥ6ァㄚ▦キㄐ<▧ㄎと►と2コ2み+ㄐシ14ヴㄙ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-32 4.2s steps(20, end) -1s infinite;
      animation: typing-32 4.2s steps(20, end) -1s infinite;
      z-index: 1;
    }
    p:nth-child(32)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.89), rgba(0, 0, 0, 0.89), rgba(0, 0, 0, 0.89), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.2s infinite -0.8s linear;
      animation: mask 4.2s infinite -0.8s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-32 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "カノwqをoㄆムめㄧuほぇほヮほp6iク▧fち▦ス";
      }
    }
    @keyframes typing-32 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "カノwqをoㄆムめㄧuほぇほヮほp6iク▧fち▦ス";
      }
    }
    p:nth-child(33)::before {
      content: "きzdた_ォニkㄚフぃスホㄊシg&ホキ%sなクㄑク";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-33 4.5s steps(20, end) -5s infinite;
      animation: typing-33 4.5s steps(20, end) -5s infinite;
      z-index: 1;
    }
    p:nth-child(33)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.5s infinite -4.8s linear;
      animation: mask 4.5s infinite -4.8s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-33 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ノ2♦ㄍゃナカタみdみマ▧ナケㄢㄑpハㄔへぁぉㄘv";
      }
    }
    @keyframes typing-33 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ノ2♦ㄍゃナカタみdみマ▧ナケㄢㄑpハㄔへぁぉㄘv";
      }
    }
    p:nth-child(34)::before {
      content: "ィホ◄y$♦ホノkをてㄋけふこソメ&fムはㄤヌ♀♦";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-34 3.8s steps(20, end) -0.3s infinite;
      animation: typing-34 3.8s steps(20, end) -0.3s infinite;
      z-index: 1;
    }
    p:nth-child(34)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.62), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.8s infinite -0.1s linear;
      animation: mask 3.8s infinite -0.1s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-34 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ぬ7ゎヲそ♥ケㄊㄊfヘㄍㄢぬt♀ハェ▨コㄊキmモ☻";
      }
    }
    @keyframes typing-34 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ぬ7ゎヲそ♥ケㄊㄊfヘㄍㄢぬt♀ハェ▨コㄊキmモ☻";
      }
    }
    p:nth-child(35)::before {
      content: "ひンゑふんㄢェaㄎf♥ゅャのㄍ3ㄋヘ*ㄋこ#▦◁▧";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-35 3.9s steps(20, end) -4.6s infinite;
      animation: typing-35 3.9s steps(20, end) -4.6s infinite;
      z-index: 1;
    }
    p:nth-child(35)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.97), rgba(0, 0, 0, 0.97), rgba(0, 0, 0, 0.97), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.9s infinite -4.4s linear;
      animation: mask 3.9s infinite -4.4s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-35 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "▤んtゅㄡゥぇほケチけㄓハㄚ2へㄅケまヘ☻5ㄜぉさ";
      }
    }
    @keyframes typing-35 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "▤んtゅㄡゥぇほケチけㄓハㄚ2へㄅケまヘ☻5ㄜぉさ";
      }
    }
    p:nth-child(36)::before {
      content: "と59glㄨㄍヱすnzクgすㄤcxチェ◁コ6シ$k";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-36 3.2s steps(20, end) -5s infinite;
      animation: typing-36 3.2s steps(20, end) -5s infinite;
      z-index: 1;
    }
    p:nth-child(36)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.68), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.2s infinite -4.8s linear;
      animation: mask 3.2s infinite -4.8s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-36 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "dㄒㄥ5セチソト&スu◁v9へg4vwほwgちゑ_";
      }
    }
    @keyframes typing-36 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "dㄒㄥ5セチソト&スu◁v9へg4vwほwgちゑ_";
      }
    }
    p:nth-child(37)::before {
      content: "ヌcヒっノ2ヮ85sコcふゑはっ&ト<ㄜノdコしェ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-37 4.7s steps(20, end) -3.2s infinite;
      animation: typing-37 4.7s steps(20, end) -3.2s infinite;
      z-index: 1;
    }
    p:nth-child(37)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.81), rgba(0, 0, 0, 0.81), rgba(0, 0, 0, 0.81), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.7s infinite -3s linear;
      animation: mask 4.7s infinite -3s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-37 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ぅ♂◁ひこハ_はへせカ8めㄤ♀ヱㄧほ▧へqとヲヶ6";
      }
    }
    @keyframes typing-37 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ぅ♂◁ひこハ_はへせカ8めㄤ♀ヱㄧほ▧へqとヲヶ6";
      }
    }
    p:nth-child(38)::before {
      content: "fㄩ+☻コェㄝねㄓ♥▨てゑtひㄥヒヌㄗせタ7▧きo";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-38 4.9s steps(20, end) -2.4s infinite;
      animation: typing-38 4.9s steps(20, end) -2.4s infinite;
      z-index: 1;
    }
    p:nth-child(38)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.76), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.9s infinite -2.2s linear;
      animation: mask 4.9s infinite -2.2s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-38 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ミくツㄔのぁ▦つrㄚくㄇ6ㄦ▣zねシょㄒほㄢ▤マ9";
      }
    }
    @keyframes typing-38 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ミくツㄔのぁ▦つrㄚくㄇ6ㄦ▣zねシょㄒほㄢ▤マ9";
      }
    }
    p:nth-child(39)::before {
      content: "wぇゥeも4ㄐュむなsㄅきシㄖㄓゅニネさnㄎケ♂ㄢ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-39 3.3s steps(20, end) -4.6s infinite;
      animation: typing-39 3.3s steps(20, end) -4.6s infinite;
      z-index: 1;
    }
    p:nth-child(39)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.96), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.3s infinite -4.4s linear;
      animation: mask 3.3s infinite -4.4s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-39 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "6<ゐけつㄒ@ゅコニp7◁たキィ☻opタ$ニっせㄅ";
      }
    }
    @keyframes typing-39 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "6<ゐけつㄒ@ゅコニp7◁たキィ☻opタ$ニっせㄅ";
      }
    }
    p:nth-child(40)::before {
      content: "4っㄏヵㄨセ♂ノㄛㄑむテゥょャ#+wwㄟ▦ㄞハふヌ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-40 3.5s steps(20, end) -2.1s infinite;
      animation: typing-40 3.5s steps(20, end) -2.1s infinite;
      z-index: 1;
    }
    p:nth-child(40)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.64), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.5s infinite -1.9s linear;
      animation: mask 3.5s infinite -1.9s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-40 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ホぁ◄ㄟゎㄙㄔyちコ@フㄙaテャ▧5ㄚヮ9めㄏ▧ㄓ";
      }
    }
    @keyframes typing-40 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ホぁ◄ㄟゎㄙㄔyちコ@フㄙaテャ▧5ㄚヮ9めㄏ▧ㄓ";
      }
    }
    p:nth-child(41)::before {
      content: "ㄒ▧ちツiコ2ヵひゑㄇヌㄤゅカナかぇaㄎィヱぃ_ㄉ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-41 4s steps(20, end) -0.9s infinite;
      animation: typing-41 4s steps(20, end) -0.9s infinite;
      z-index: 1;
    }
    p:nth-child(41)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4s infinite -0.7s linear;
      animation: mask 4s infinite -0.7s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-41 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "チケっォケま8ゃホㄆㄩ▤$▨ㄢスrk▥サャへㄙヰh";
      }
    }
    @keyframes typing-41 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "チケっォケま8ゃホㄆㄩ▤$▨ㄢスrk▥サャへㄙヰh";
      }
    }
    p:nth-child(42)::before {
      content: "みㄞㄏ#サㄩヶくhまg%rzㄘ☻xてㄗxㄏㄇゅノㄇ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-42 4.9s steps(20, end) -3.2s infinite;
      animation: typing-42 4.9s steps(20, end) -3.2s infinite;
      z-index: 1;
    }
    p:nth-child(42)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.66), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.9s infinite -3s linear;
      animation: mask 4.9s infinite -3s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-42 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄇカま$ふはてょ☻%ㄛㄩこきすo$はㄞモbㄞkㄏョ";
      }
    }
    @keyframes typing-42 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄇカま$ふはてょ☻%ㄛㄩこきすo$はㄞモbㄞkㄏョ";
      }
    }
    p:nth-child(43)::before {
      content: "ㄦヘㄍㄅ%►hは▤▨ハァシgㄝヰ☻すトハそ◄こmㄓ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-43 3.9s steps(20, end) -1.8s infinite;
      animation: typing-43 3.9s steps(20, end) -1.8s infinite;
      z-index: 1;
    }
    p:nth-child(43)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.77), rgba(0, 0, 0, 0.77), rgba(0, 0, 0, 0.77), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.9s infinite -1.6s linear;
      animation: mask 3.9s infinite -1.6s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-43 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ぇソぁほめㄒxㄖsタヶカㄋmたy^►◁♀ちノpェょ";
      }
    }
    @keyframes typing-43 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ぇソぁほめㄒxㄖsタヶカㄋmたy^►◁♀ちノpェょ";
      }
    }
    p:nth-child(44)::before {
      content: "sツヶㄒメㄑㄇmc♦ㄡモㄡねク*♂ㄓㄡはセね▧ぅそ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-44 4.5s steps(20, end) -4.3s infinite;
      animation: typing-44 4.5s steps(20, end) -4.3s infinite;
      z-index: 1;
    }
    p:nth-child(44)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.81), rgba(0, 0, 0, 0.81), rgba(0, 0, 0, 0.81), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.5s infinite -4.1s linear;
      animation: mask 4.5s infinite -4.1s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-44 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "5ヌァ#g<な8モsンマ☻け♥ゅとlㄏけヶヵㄧㄢㄇ";
      }
    }
    @keyframes typing-44 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "5ヌァ#g<な8モsンマ☻け♥ゅとlㄏけヶヵㄧㄢㄇ";
      }
    }
    p:nth-child(45)::before {
      content: "ㄍフ▧☻$ぅゑねみヰにlㄥgㄏㄋuㄞヮ▨ㄈィシたェ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-45 4s steps(20, end) -4.4s infinite;
      animation: typing-45 4s steps(20, end) -4.4s infinite;
      z-index: 1;
    }
    p:nth-child(45)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.82), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4s infinite -4.2s linear;
      animation: mask 4s infinite -4.2s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-45 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "マカぉハ▣+1ネぅハむハヱへwヮe8ソfテきのㄅz";
      }
    }
    @keyframes typing-45 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "マカぉハ▣+1ネぅハむハヱへwヮe8ソfテきのㄅz";
      }
    }
    p:nth-child(46)::before {
      content: "カㄔヮな2ヘさカㄣと>@ナfhㄋェㄒ▧しgㄐㄔタツ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-46 3.5s steps(20, end) -0.3s infinite;
      animation: typing-46 3.5s steps(20, end) -0.3s infinite;
      z-index: 1;
    }
    p:nth-child(46)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.91), rgba(0, 0, 0, 0.91), rgba(0, 0, 0, 0.91), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 3.5s infinite -0.1s linear;
      animation: mask 3.5s infinite -0.1s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-46 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "t▨とヮㄕf▥bm&ㄓgけㄔㄕdけほㄘを_そょㄑキ";
      }
    }
    @keyframes typing-46 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "t▨とヮㄕf▥bm&ㄓgけㄔㄕdけほㄘを_そょㄑキ";
      }
    }
    p:nth-child(47)::before {
      content: "チ53スpテけㄅeまqㄋ◁▧ㄣ2>シ▥ょ&h♥しa";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-47 4.9s steps(20, end) -2.9s infinite;
      animation: typing-47 4.9s steps(20, end) -2.9s infinite;
      z-index: 1;
    }
    p:nth-child(47)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.9s infinite -2.7s linear;
      animation: mask 4.9s infinite -2.7s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-47 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄎめ2pf<けさ+ぉㄘヱォㄒく▥▣ㄉ*せlぃsㄍフ";
      }
    }
    @keyframes typing-47 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄎめ2pf<けさ+ぉㄘヱォㄒく▥▣ㄉ*せlぃsㄍフ";
      }
    }
    p:nth-child(48)::before {
      content: "ソㄔㄝㄥヒㄠ▧ㄇㄘサォさ4ツ◄ょネxタキzャㄐㄗㄨ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-48 4.2s steps(20, end) -4.2s infinite;
      animation: typing-48 4.2s steps(20, end) -4.2s infinite;
      z-index: 1;
    }
    p:nth-child(48)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.94), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.2s infinite -4s linear;
      animation: mask 4.2s infinite -4s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-48 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "にㄝモㄞちa▦ふュゅ5ぃhiテヶㄙㄦクとてめqqム";
      }
    }
    @keyframes typing-48 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "にㄝモㄞちa▦ふュゅ5ぃhiテヶㄙㄦクとてめqqム";
      }
    }
    p:nth-child(49)::before {
      content: "*ㄑさ8^けタmコニホㄉwテキフクヒヒ◄ゥゎ^ム►";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-49 4.9s steps(20, end) -3.4s infinite;
      animation: typing-49 4.9s steps(20, end) -3.4s infinite;
      z-index: 1;
    }
    p:nth-child(49)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.97), rgba(0, 0, 0, 0.97), rgba(0, 0, 0, 0.97), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.9s infinite -3.2s linear;
      animation: mask 4.9s infinite -3.2s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-49 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄥㄛ^ㄖㄟそgォㄐㄟㄋmネgㄊゑ@8ヮなㄋァ▧ゃa";
      }
    }
    @keyframes typing-49 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "ㄥㄛ^ㄖㄟそgォㄐㄟㄋmネgㄊゑ@8ヮなㄋァ▧ゃa";
      }
    }
    p:nth-child(50)::before {
      content: "ヰシサト3たなㄝサムㄡtゎょハ♂kス▧oㄍケねぅつ";
      color: #b3ffc7;
      text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px currentColor, 0 0 10px currentColor;
      -webkit-animation: typing-50 4.4s steps(20, end) -4.5s infinite;
      animation: typing-50 4.4s steps(20, end) -4.5s infinite;
      z-index: 1;
    }
    p:nth-child(50)::after {
      content: "";
      background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), transparent 75%, transparent);
      background-size: 100% 220%;
      background-repeat: no-repeat;
      -webkit-animation: mask 4.4s infinite -4.3s linear;
      animation: mask 4.4s infinite -4.3s linear;
      z-index: 2;
    }
    @-webkit-keyframes typing-50 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "♀つ9&1ィv◄ォなヱㄕㄤかヰㄇヴツへツㄇg^8タ";
      }
    }
    @keyframes typing-50 {
      0% {
        height: 0;
      }
      25% {
        height: 100%;
      }
      100% {
        height: 100%;
        content: "♀つ9&1ィv◄ォなヱㄕㄤかヰㄇヴツへツㄇg^8タ";
      }
    }
    @-webkit-keyframes mask {
      0% {
        background-position: 0 220%;
      }
      30% {
        background-position: 0 0%;
      }
      100% {
        background-position: 0 0%;
      }
    }
    @keyframes mask {
      0% {
        background-position: 0 220%;
      }
      30% {
        background-position: 0 0%;
      }
      100% {
        background-position: 0 0%;
      }
    }
  </style>
  <script>
    window.console = window.console || function (t) { };
  </script>
  <script>
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage("resize", "*");
    }
  </script>
</head>
<body translate="no">
  <div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
    <div></div>
    <a id="xl_chrome_ext_download" href="javascript:;">下载视频</a>
    <a id="xl_chrome_ext_close" href="javascript:;"></a>
  </div>
</body>
</html>

        查看在线实例

        通过以上内容我们知道了css如何实现黑客帝国流星字动画特效?感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!


相关资讯

  • 设置英文首字母大写的css属性是什么?

    设置CSS text-transform 的属性为capitalize就可以实现英文首字母大写。 定义和用法  text-transform 属性控制文本的大小写。 属性值 值 描 述 none 默认。定义带有小写字…

    2021/7/14 20:35:17
  • 只让页面显示横滚动条,不显示竖滚动条如何实现?

    只让页面显示横滚动条,不显示竖滚动条的方法其实很简单,主要用到body的两个css属性 overflow和 overflow-y,如下所示:body { overflow:scroll; overflow-y:hidden;}

    2021/2/28 21:45:25
  • 网页的滚动条样式可以修改吗?如何修改?

    网页的滚动条样式可以修改的,主要是使用css来控制那如何修改呢?如下代码:<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="hei…

    2021/2/28 21:15:24
  • css如何实现6张图片均匀排列在一行?

    css部分如下:img{width:120px; height:80px;float:left;margin-right:16px;}.img3{margin-right:0;}html部分如下:<img src="images/001.jpg" /><img src="images/002.jpg" /><img src="images/003.jpg" /><img src=…

    2021/2/28 21:10:01