首先看下效果图
CSS3 字符动画
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
margin: 0;
display: flex;
height: 100vh;
background: #240041;
font-family: Montserrat, sans-serif;
}
h1 {
margin: auto;
font-size: 20vw;
text-align: center;
text-transform: uppercase;
color: #900048;
white-space: nowrap;
letter-spacing: -.15em;
}
span:nth-child(1) {
animation: blink 1s steps(1, start) 0.33s infinite;
}
span:nth-child(2) {
animation: blink 1s steps(1, start) 0.66s infinite;
}
span:nth-child(3) {
animation: blink 1s steps(1, start) 0.33s infinite;
}
span:nth-child(4) {
animation: blink 1s steps(1, start) 0.66s infinite;
}
span:nth-child(5) {
animation: blink 1s steps(1, start) 0.33s infinite;
}
span:nth-child(6) {
animation: blink 1s steps(1, start) 0.66s infinite;
}
@keyframes blink {
33% {
color: #FF4057;
}
66% {
color: #FF8260;
}
}
</style>
</head>
<body>
<h1>
<span>T</span>
<span>h</span>
<span>a</span>
<span>n</span>
<span>k</span>
<span>s</span>
</h1>
</body>
</html>
