本文主要是介绍标题字闪光效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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
这篇关于标题字闪光效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
