css流光文字制作

CSS 流光文字制作方法

通过 CSS 动画和渐变效果可以实现流光文字效果，以下是具体实现步骤：

方法一：使用线性渐变和动画

.text-glow {
  background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flow 4s linear infinite;
}

@keyframes flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

HTML部分：

<div class="text-glow">流光文字效果</div>

方法二：使用阴影和动画

.text-shine {
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073;
  animation: shine 2s infinite alternate;
}

@keyframes shine {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6;
  }
}

方法三：结合伪元素实现

.text-flow {
  position: relative;
  color: transparent;
}

.text-flow::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: flow 4s linear infinite;
}

HTML部分：

<div class="text-flow" data-text="流光文字效果"></div>

注意事项

• 使用background-clip: text时需添加-webkit-前缀以保证兼容性
• 渐变颜色可根据需求调整
• 动画时间和效果可通过修改animation属性值自定义
• 确保文字颜色设置为透明(color: transparent)才能显示背景渐变效果