HTML+CSS+JS：微光波浪文本动画

效果演示

实现了一个文字闪烁效果，通过使用CSS动画和渐变来创建波浪状的动态效果。具体来说，文字会在不同时间点进行变换，包括颜色、旋转、缩放和透明度等属性的变化，从而呈现出类似波浪的动态效果。这种效果通常用于吸引用户的注意力或为页面增添一些动感和视觉吸引力。

Code

<div id="shimmerWave">Generating summary...</div>

/* 设置页面基本样式 */
body,
html {
    height: 100%; /* 设置页面高度为100% */
    margin: 0; /* 设置页面外边距为0 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background-color: #000; /* 设置背景颜色为黑色 */
    -webkit-text-size-adjust: 100%; /* WebKit浏览器文本大小调整为100% */
    -moz-text-size-adjust: 100%; /* Firefox浏览器文本大小调整为100% */
    text-size-adjust: 100%; /* 文本大小调整为100% */
    -webkit-font-smoothing: antialiased; /* WebKit浏览器字体平滑处理 */
    text-rendering: optimizelegibility; /* 优化文本渲染 */
    -webkit-text-size-adjust: none; /* 禁止WebKit浏览器文本大小调整 */
    -moz-text-size-adjust: none; /* 禁止Firefox浏览器文本大小调整 */
    text-size-adjust: none; /* 禁止文本大小调整 */
}

/* 设置#shimmerWave元素样式 */
#shimmerWave {
    color: #46afc8; /* 设置文字颜色 */
    font-size: 40px; /* 设置文字大小 */
    font-family: "Open-Sans", sans-serif; /* 设置字体 */
    font-weight: 600; /* 设置字体粗细 */
    perspective: 80px; /* 设置透视效果 */
    transform-style: preserve-3d; /* 保持3D变换效果 */
}

/* 设置#shimmerWave内span元素样式 */
#shimmerWave span {
    position: relative; /* 设置相对定位 */
    transition: all 0.3s ease; /* 设置过渡效果 */
    display: inline-block; /* 行内块元素显示 */
    -webkit-animation: wave 2.4s ease infinite; /* 设置WebKit动画 */
    animation: wave 2.4s ease infinite; /* 设置动画 */
    letter-spacing: 0.01em; /* 设置字间距 */
    transform-origin: 100% 50%; /* 设置变换原点 */
    transform-style: preserve-3d; /* 保持3D变换效果 */
}

/* 为每个span元素设置不同的动画延迟时间 */
#shimmerWave span:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
/* 依此类推 */
...

/* 定义WebKit动画效果wave */
@-webkit-keyframes wave {
    /* 不同关键帧的样式变化 */
}

/* 定义通用动画效果wave */
@keyframes wave {
    /* 不同关键帧的样式变化 */
}

const target = document.getElementById('shimmerWave');
function splitTextToSpans(targetElement) {
  if (targetElement) {
    const text = targetElement.textContent;
    targetElement.innerHTML = '';
    for (let character of text) {
      const span = document.createElement('span');
      if (character === ' ') {
        span.innerHTML = ' ';
      } else {
        span.textContent = character;
      }
      targetElement.appendChild(span);
    }
  }
}
splitTextToSpans(target);