CSS实现鼠标悬停时text-shadow颜色从左到右水平过渡动画

直接给text-shadow加transition无法实现水平方向扫过的变色效果，浏览器会对所有阴影参数同时做补间，最终呈现的是整体颜色渐变，没有水平位移的过渡感。要实现目标效果，用双层文本叠加的方案即可，核心逻辑是两层完全对齐的同内容文本叠放，通过控制上层带目标色阴影的文本宽度变化，做出水平扫过的动画。

React + styled-components 可直接复用代码 #

import styled from 'styled-components';

const HoverShadowText = styled.li`
  position: relative;
  background: #000;
  font-size: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  /* 底层文本：默认白色描边阴影 */
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;

  /* 上层同内容文本，默认宽度0隐藏 */
  &::after {
    content: attr(data-content);
    position: absolute;
    inset: 0;
    width: 0;
    overflow: hidden;
    /* 上层文本使用目标青色阴影 */
    text-shadow: -1px -1px 0 cyan, 1px -1px 0 cyan, -1px 1px 0 cyan, 1px 1px 0 cyan;
    /* 控制过渡速度和缓动效果，可按需调整 */
    transition: width 0.3s ease;
  }

  &:hover::after {
    width: 100%;
  }
`;

// 使用示例
export default function TextDemo() {
  return <HoverShadowText data-content="Test">Test</HoverShadowText>
}

注意事项 #

• 宿主元素必须设置position: relative，保证伪元素生成的上层文本和底层文本完全对齐
• data-content属性传入的值必须和标签内的实际文本完全一致，否则上下层文本错位会导致动画异常
• 鼠标移出时会自动触发反向收回的过渡效果，不需要额外编写离开状态的动画逻辑
• 可通过修改transition的时长、缓动函数调整动画手感，比如替换为0.5s linear获得更匀速的扫动效果

内容的提问来源于stack exchange，提问作者pacifica94