css-study-demo
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>一颗小白菜</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: linear-gradient(
            rgba(16, 16, 16, 0.8),
            rgba(16, 16, 16, 0.8)
          );
        /* background: linear-gradient(
            rgba(16, 16, 16, 0.8),
            rgba(16, 16, 16, 0.8)
          ),
          url(https://cdn.jsdelivr.net/gh/cabfan/imges-yang@master/20210818/壁纸.3vascyj6prs0.jpg); */
        background-size: cover;
      }
      p {
        margin: 0 9em;
        font-size: 1.2em;
        font-weight: 600;
        width: 80vw;
      }

      .landIn {
        display: flex;
        flex-wrap: wrap;
        line-height: 1.8;
        color: #ecf0f1;
        white-space: pre;
        letter-spacing: 0.1em;
        text-shadow: 1px 1px 15px #bdc3c7;
      }

      .landIn span {
        animation: landIn 0.5s ease-out both;
      }

      @keyframes landIn {
        from {
          opacity: 0;
          transform: translateY(-20%);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .reveal {
        color: #6ee1f5;
        font-size: 1rem;
        font-family: Raleway, sans-serif;
        letter-spacing: 3px;
        text-transform: uppercase;
        white-space: pre;
        position: absolute;
        top: 20vh;
      }
      .reveal span {
        display: inline-block;
        opacity: 0;
        transform: scale(0);
        animation: fadeIn 1.5s forwards;
      }

      .reveal::before,
      .reveal::after {
        position: absolute;
        content: "";
        top: 0;
        bottom: 0;
        width: 2px;
        height: 100%;
        background: white;
        opacity: 0;
        transform: scale(0);
      }

      .reveal::before {
        left: 50%;
        animation: slideLeft 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
      }

      .reveal::after {
        right: 50%;
        animation: slideRight 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
      }

      @keyframes fadeIn {
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      @keyframes slideLeft {
        to {
          left: -10%;
          opacity: 1;
          transform: scale(0.9);
        }
      }

      @keyframes slideRight {
        to {
          right: -10%;
          opacity: 1;
          transform: scale(0.9);
        }
      }

      .footer {
        position: absolute;
        bottom: 20px;
        font-size: 0.9rem;
        color: white;
        letter-spacing: 0.1rem;
        text-shadow: 1px 1px 5px #bdc3c7;
      }
      .footer a {
        color: inherit;
        text-decoration: initial;
      }
    </style>
  </head>
  <body>
    <div class="reveal">xiao bai cai</div>
    <p class="landIn">
      <!-- 工作如果分太细，后果是技能单一，就像流水线上的工人，每天重复做同样的事情，变成体力劳动。综合跨界是跳出火坑的关键，好的创意与点子来自不同知识领域的碰撞，创新需要基石。 -->
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </p>
    <div class="footer">
      ©小白菜 2020-2021&nbsp;&nbsp;<a
        rel="nofollow"
        href="http://beian.miit.gov.cn/"
        target="_blank"
        >陕ICP备18021204号-1</a
      >
    </div>
    <script>
      let landIn = () => {
        let landInTexts = document.querySelectorAll(".landIn");
        landInTexts.forEach((landInText) => {
          let letters = landInText.textContent.split("");
          landInText.textContent = "";
          letters.forEach((letter, i) => {
            let span = document.createElement("span");
            span.textContent = letter;
            span.style.animationDelay = `${i * 0.1}s`;
            landInText.append(span);
          });
        });
      };
      landIn();

      let reveal = () => {
        let duration = 0.8;
        let delay = 0.3;
        let revealText = document.querySelector(".reveal");
        let letters = revealText.textContent.split("");
        revealText.textContent = "";
        let middle = letters.filter((e) => e !== " ").length / 2;
        letters.forEach((letter, i) => {
          let span = document.createElement("span");
          span.textContent = letter;
          span.style.animationDelay = `${delay + Math.abs(i - middle) * 0.1}s`;
          revealText.append(span);
        });
      };
      reveal();
    </script>
  </body>
</html>