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
Gitee地址：https://gitee.com/zheng_yongtao/html-css-js-Achieve-cool-results.git
