纯CSS实现简单的打字效果

鱼柒

html代码：

1. <p class="print">只需要几行代码就可以实现简单的打字效果哦~怎么样，好玩吗~</p>

复制代码

css代码：

1. .print {
   
2.     width: 100%;
   
3.     white-space: nowrap;
   
4.     overflow: hidden;
   
5.     -webkit-animation: dy 3s steps(60, end) infinite;
   
6.     animation: dy 3s steps(50, end) infinite;
   
7. }
   
8. 
   
9. @-webkit-keyframes dy {
   
10.     from {
    
11.         width: 0;
    
12.     }
    
13. }
    
14. 
    
15. @keyframes dy {
    
16.     from {
    
17.         width: 0;
    
18.     }
    
19. }

复制代码