打字效果 css

##打字效果 css

.typing{width:0;white-space:nowrap;overflow:hidden;-webkit-animation: type 20s steps(50,end) 10 forwards;animation: type 20s steps(50,end) 10 forwards;}

.typing:nth-child(2){-webkit-animation-delay:3s;animation-delay:3s}

.typing:nth-child(3){-webkit-animation-delay:6s;animation-delay:6s}

.typing:nth-child(4){-webkit-animation-delay:9s;animation-delay:9s}

.typing:nth-child(5){-webkit-animation-delay:12s;animation-delay:12s}

.typing:nth-child(6){-webkit-animation-delay:15s;animation-delay:15s}

.typing:nth-child(7){-webkit-animation-delay:18s;animation-delay:18s}

.typing:nth-child(8){-webkit-animation-delay:21s;animation-delay:21s}

.typing:nth-child(9){-webkit-animation-delay:24s;animation-delay:24s}

.typing:nth-child(10){-webkit-animation-delay:27s;animation-delay:27s}

.typing:nth-child(11){-webkit-animation-delay:30s;animation-delay:30s}

@-webkit-keyframes type{0%{width:0}

15%{width:100%}

100%{width:100%}

}

@keyframes type{0%{width:0}

15%{width:100%}

100%{width:100%}

}