1、html
（1）在页面中加入h1标签并放上想要显示的文字内容
<body>
<h1>SADON_ jung</h1>
</body>
2、css
html{
font-size: 15px;
}
body{
display: flex;
justify-content: center;/* 水平居中 */
align-items: center;/* 垂直居中,需要给高度 */
min-height: 100vh;
flex-direction: column;
}
h1{
font-size: 6rem;
}
span{
display: inline-block;
animation-name:blink;
/*取出style中的--delay属性值*/
animation-delay: var(--delay);
animation-timing-function: ease-in-out;
animation-duration: .4s;
}
@keyframes blink{
0%, 100%{
color: inherit;
}
50%{
color: #B9E769;
}
}
3、js
const h1 = document.querySelector('h1')
//为每个字母套上span标签
h1.innerHTML = h1.textContent.replace(/\S/g,"<span>$&</span>")
document.querySelectorAll('span').forEach((span,index)=>{
span.style.setProperty('--delay',`${
index*0.1}s`)
})
学习自B站：https://www.bilibili.com/video/BV1TA411T7ne