html + css 实现打印机效果文字

这个效果看起来很酷，我们来实现一下！

html

<div>
    <!-- 静止的字 -->
    <span style="color: crimson">Z</span>
    <!-- 动态的字 -->
    <div class="anime-text">
        <span>E</span>
        <span>L</span>
        <span>L</span>
    </div>
</div>

css

1. 文字出现动画

   @keyframes in {
       0% {
           opacity: 0;
       }
   
       100% {
           opacity: 1;
       }
   }
   .anime-text {
       display: inline-block;
       --one: 0.05s;
       --two: 0.1s;
       --three: 0.15s;
   }
   .anime-text:hover span:nth-child(1) {
       animation: in var(--one) step-end forwards;
   }
   
   .anime-text:hover span:nth-child(2) {
       animation: in var(--two) step-end forwards;
   }
   
   .anime-text:hover span:nth-child(3) {
       animation: in var(--three) step-end forwards;
   }
   

2. 文字消失动画

   @keyframes out {
       0% {
           opacity: 1;
       }
   
       100% {
           opacity: 0;
       }
   }
   .anime-text span:nth-child(1) {
       animation: out var(--one) step-end forwards;
   }
   
   .anime-text span:nth-child(2) {
       animation: out var(--two) step-end forwards;
   }
   
   .anime-text span:nth-child(3) {
       animation: out var(--three) step-end forwards;
   }
   

3. 初始时隐藏文字

   @keyframes hide {
       0% {
           opacity: 0;
       }
   
       100% {
           opacity: 1;
       }
   }
   .anime-text {
   	// ... 同上
       animation: hide var(--three);
       animation-timing-function: step-end;
   }
   

done !

在线代码 jsbin.com/kopaker/edi…