html打字机文本是什么,文本按打字机逐字显示的动效

CSS

语言：

CSSSCSS

确定

html {

font-size: 20px;

}

@media (min-width: 600px) {

html {

font-size: 30px;

}

}

body {

margin: 0;

font-family: Courier, Helvetica, sans-serif;

background: #fafafa;

}

.component {

padding: .5rem;

text-align: center;

margin: 0 auto;

max-width: 1000px;

}

.component .typewriter {

margin: .5rem;

padding: 1rem .5rem;

text-align: left;

font-weight: 300;

}

.component .typewriter > span {

display: inline-block;

}

.component .typewriter.animate > span > i {

-webkit-animation: typewriter 300ms forwards, background 1000ms forwards;

animation: typewriter 300ms forwards, background 1000ms forwards;

}

.component .typewriter > span > i {

opacity: 0;

color: #111;

font-style: normal;

font-size: 1em;

min-width: .4em;

border-radius: 2px;

}

.component .typewriter > span > i:nth-of-type(1) {

-webkit-animation-delay: 100ms;

animation-delay: 100ms;

}

.component .typewriter > span > i:nth-of-type(2) {

-webkit-animation-delay: 200ms;

animation-delay: 200ms;

}

.component .typewriter > span > i:nth-of-type(3) {

-webkit-animation-delay: 300ms;

animation-delay: 300ms;

}

.component .typewriter > span > i:nth-of-type(4) {

-webkit-animation-delay: 400ms;

animation-delay: 400ms;

}

.component .typewriter > span > i:nth-of-type(5) {

-webkit-animation-delay: 500ms;

animation-delay: 500ms;

}

.component .typewriter > span > i:nth-of-type(6) {

-webkit-animation-delay: 600ms;

animation-delay: 600ms;

}

.component .typewriter > span > i:nth-of-type(7) {

-webkit-animation-delay: 700ms;

animation-delay: 700ms;

}

.component .typewriter > span > i:nth-of-type(8) {

-webkit-animation-delay: 800ms;

animation-delay: 800ms;

}

.component .typewriter > span > i:nth-of-type(9) {

-webkit-animation-delay: 900ms;

animation-delay: 900ms;

}

.component .typewriter > span > i:nth-of-type(10) {

-webkit-animation-delay: 1000ms;

animation-delay: 1000ms;

}

.component .typewriter > span > i:nth-of-type(11) {

-webkit-animation-delay: 1100ms;

animation-delay: 1100ms;

}

.component .typewriter > span > i:nth-of-type(12) {

-webkit-animation-delay: 1200ms;

animation-delay: 1200ms;

}

.component .typewriter > span > i:nth-of-type(13) {

-webkit-animation-delay: 1300ms;

animation-delay: 1300ms;

}

.component .typewriter > span > i:nth-of-type(14) {

-webkit-animation-delay: 1400ms;

animation-delay: 1400ms;

}

.component .typewriter > span > i:nth-of-type(15) {

-webkit-animation-delay: 1500ms;

animation-delay: 1500ms;

}

.component .typewriter > span > i:nth-of-type(16) {

-webkit-animation-delay: 1600ms;

animation-delay: 1600ms;

}

.component .typewriter > span > i:nth-of-type(17) {

-webkit-animation-delay: 1700ms;

animation-delay: 1700ms;

}

.component .typewriter > span > i:nth-of-type(18) {

-webkit-animation-delay: 1800ms;

animation-delay: 1800ms;

}

.component .typewriter > span > i:nth-of-type(19) {

-webkit-animation-delay: 1900ms;

animation-delay: 1900ms;

}

.component .typewriter > span > i:nth-of-type(20) {

-webkit-animation-delay: 2000ms;

animation-delay: 2000ms;

}

.component .typewriter > span > i:nth-of-type(21) {

-webkit-animation-delay: 2100ms;

animation-delay: 2100ms;

}

.component .typewriter > span > i:nth-of-type(22) {

-webkit-animation-delay: 2200ms;

animation-delay: 2200ms;

}

.component .typewriter > span > i:nth-of-type(23) {

-webkit-animation-delay: 2300ms;

animation-delay: 2300ms;

}

.component .typewriter > span > i:nth-of-type(24) {

-webkit-animation-delay: 2400ms;

animation-delay: 2400ms;

}

.component .typewriter > span > i:nth-of-type(25) {

-webkit-animation-delay: 2500ms;

animation-delay: 2500ms;

}

.component .typewriter > span > i:nth-of-type(26) {

-webkit-animation-delay: 2600ms;

animation-delay: 2600ms;

}

.component .typewriter > span > i:nth-of-type(27) {

-webkit-animation-delay: 2700ms;

animation-delay: 2700ms;

}

.component .typewriter > span > i:nth-of-type(28) {

-webkit-animation-delay: 2800ms;

animation-delay: 2800ms;

}

.component .typewriter > span > i:nth-of-type(29) {

-webkit-animation-delay: 2900ms;

animation-delay: 2900ms;

}

.component .typewriter > span > i:nth-of-type(30) {

-webkit-animation-delay: 3000ms;

animation-delay: 3000ms;

}

.component .btn-replay {

padding: .5rem;

background: white;

border: 0;

box-shadow: 1px 1px 2px #777;

text-transform: uppercase;

cursor: pointer;

}

@-webkit-keyframes typewriter {

50% {

-webkit-transform: scale(1.4);

transform: scale(1.4);

}

100% {

opacity: 1;

}

}

@keyframes typewriter {

50% {

-webkit-transform: scale(1.4);

transform: scale(1.4);

}

100% {

opacity: 1;

}

}

@-webkit-keyframes background {

0% {

background: rgba(17, 17, 17, 0.1);

}

}

@keyframes background {

0% {

background: rgba(17, 17, 17, 0.1);

}

}