如何实现鼠标悬停时的特定Glitch抖动动画？

目标效果参考：

问题分析 #

你现有代码的抖动效果过于规律，且颜色区分不明显，和目标GIF的随机错位、彩色偏移效果不符。以下是修正后的实现方案：

修正后的代码 #

HTML

<p data-glitch="Explore" class="carousel-item">Explore</p>

（注：将标签内文本与data-glitch属性值统一，避免内容不一致）

CSS

.carousel-item {
  text-decoration: none;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 28px;
  transition: font-size 0.3s ease;
}

.carousel-item:before,
.carousel-item:after {
  display: block;
  content: attr(data-glitch);
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.7;
}

.carousel-item:after {
  color: #ff00ff; /* 洋红色偏移层 */
  z-index: -2;
}

.carousel-item:before {
  color: #00ffff; /* 青色偏移层 */
  z-index: -1;
}

.carousel-item:hover {
  font-size: 35px;
}

.carousel-item:hover:before {
  animation: glitch-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.carousel-item:hover:after {
  animation: glitch-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

/* 左侧错位动画 */
@keyframes glitch-left {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(-3px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(-2px, -2px); }
  100% { transform: translate(0); }
}

/* 右侧错位动画 */
@keyframes glitch-right {
  0% { transform: translate(0); }
  20% { transform: translate(2px, -1px); }
  40% { transform: translate(3px, 1px); }
  60% { transform: translate(1px, -2px); }
  80% { transform: translate(2px, 2px); }
  100% { transform: translate(0); }
}

关键修改点 #

• 颜色区分：将before和after层改为青色和洋红色，模拟经典的Glitch色彩偏移效果
• 动画优化：拆分出左右两个不同的动画关键帧，让错位方向更符合目标GIF的随机感，缩短动画时长让抖动更紧凑
• 过渡调整：简化字体大小的过渡曲线，让缩放和抖动更同步
• 内容统一：修正HTML中标签文本与data-glitch属性值不一致的问题

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