css3 实现打字机效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .typer_main{ font-size: 1.8rem; font-weight: normal; letter-spacing: .3rem; -webkit-animation: typer 5s steps(50, end) forwards; animation: typer 5s steps(50, end) forwards; } .typer{ width:100%; white-space:nowrap; overflow:hidden; } @-webkit-keyframes typer{ from { width: 0;} } @keyframes typer{ from { width: 0;} } </style> </head> <body> <h1 class="typer typer_main">come on bro!</h1> </body> </html>