思路：

  • 先把字符串取出来，转换成 span 包裹的字符
  • 监听 mouseover 事件，添加关键帧
  • 监听 animationend事件，移除 class 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style> * { padding: 0; margin: 0; } body { width: 200vh; height: 100vh; /*弹性盒模型*/ display: flex; /*对齐方式*/ justify-content: center; align-items: center; background: #a29bfe; } div { font-size: 5em; font-weight: bold; text-transform: uppercase; color: #00cec9; } div>span { position: relative; display: inline-block; } .color { /*关键帧名*/ animation-name: color; /*过程时间*/ animation-duration: 1s; /*重复次数*/ animation-iteration-count: 1; /*动画方式*/ animation-timing-function: linear; /*动画来回切换*/ animation-direction: alternate; } @keyframes color { 50% { color: #ffeaa7; /*缩放x2*/ transform: scale(2); } to { color: #fd79a8; transform: scale(0.5); } } </style>
</head>

<body>
  <div>lawsssscat</div>
</body>
<script> const div = document.querySelector('div'); [...div.textContent].reduce((previous, current, index) => { // 替换字符 previous == index && (div.innerHTML = ""); let span = document.createElement('span'); span.innerHTML = current; div.appendChild(span); // 动画开始 span.addEventListener('mouseover', (e) => { e.target.classList.add('color') }) // 动画结束 span.addEventListener('animationend', (e) => { e.target.classList.remove('color'); }) }, 0); </script>

</html>