css 特效

作者：月冷清发布日期:2026-01-22 浏览:70

/* 示例代码：CSS 特效 - 文字渐变动画 */

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

.gradient-text {
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  background-size: 200% 200%;
  color: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textGradient 5s infinite;
}

/* 解释说明：
- @keyframes textGradient 定义了一个渐变动画，背景位置从0%到100%。
- .gradient-text 类应用了线性渐变背景，并设置了背景大小为200%以确保动画效果平滑。
- 使用 -webkit-background-clip 和 -webkit-text-fill-color 实现文字的渐变效果。
- animation 属性让文字背景在5秒内无限循环渐变动画。
*/

上一篇：css文字两端对齐怎么设置

下一篇：css新属性