css 动画打字效果

女爷i 2022-09-11 11:15 260阅读 0赞

## 本文借鉴 [https://blog.csdn.net/weixin\_39843414/article/details/119792197][https_blog.csdn.net_weixin_39843414_article_details_119792197] ##

## 使用 CSS 实现打字效果 ##

<h1>Pure CSS Typing animation.</h1>

## 满屏动画 依次出现 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA5aSpMjjlsI_ml7Y_size_20_color_FFFFFF_t_70_g_se_x_16]

<template>
      <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
    </template>
    
    <script>
    export default { };
    </script>
    
    <style lang="scss">
    .box { 
      width: 100vw;
      display: flex;
      justify-content: space-between;
    }
    @import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&display=swap");
    
    $str: "你好这是测试用的文本内容,效果还不错";
    $length: str-length($str);
    $n: 50;
    $animationTime: 1;
    $perColumnNums: 25;
    
    @function randomChar() { 
      $r: random($length);
      @return str-slice($str, $r, $r);
    }
    
    @function randomChars($number) { 
      $value: "";
    
      @if $number > 0 { 
        @for $i from 1 through $number { 
          $value: $value + randomChar();
        }
      }
      @return $value;
    }
    
    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;
    
      &::before,
      &::after { 
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        overflow: hidden;
      }
    }
    
    $n: 10;
    $animationTime: 3;
    $perColumnNums: 20;
    
    @for $i from 0 through $n { 
      $content: randomChars($perColumnNums);
      $contentNext: randomChars($perColumnNums);
      $delay: random($n);
      $randomAnimationTine: #{ $animationTime + random(20) / 10 - 1}s;
    
      p:nth-child(#{ $i})::before { 
        content: $content;
        // color: #fff;
        color: rgba(179, 255, 199,.5);
        animation: typing-#{ $i}
          $randomAnimationTine
          steps(20, end)
          #{ $delay *
          0.1s *
          -1}
          infinite;
      }
    
      @keyframes typing-#{ $i} { 
        0% { 
          height: 0;
        }
        25% { 
          height: 100%;
        }
        100% { 
          height: 100%;
          content: $contentNext;
        }
      }
    }
    
    @keyframes mask { 
      0% { 
        background-position: 0 220%;
      }
      30% { 
        background-position: 0 0%;
      }
      100% { 
        background-position: 0 0%;
      }
    }
    </style>

[https_blog.csdn.net_weixin_39843414_article_details_119792197]: https://blog.csdn.net/weixin_39843414/article/details/119792197
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA5aSpMjjlsI_ml7Y_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/e17389600a534cc796f272a2f1f4bcdf.png