文字渐变，跳动，闪烁特效

1. 文字渐变效果

<!DOCTYPE html>
<html>
<head>
<style>
.gradient-text {
  background: linear-gradient(to right, #6a11cb, #2575fc);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 24px;
}
</style>
</head>
<body>
<p class="gradient-text">这是渐变文字效果</p>
</body>
</html>

2. 文字闪烁效果

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.blinking-text {
  animation: blink 1s linear infinite;
  font-size: 24px;
}
</style>
</head>
<body>
<p class="blinking-text">这是闪烁文字</p>
</body>
</html>

3. 文字阴影效果

<!DOCTYPE html>
<html>
<head>
<style>
.text-shadow {
  font-size: 24px;
  text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<p class="text-shadow">这是带有阴影的文字</p>
</body>
</html>

4. 文字旋转效果

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes rotateText {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.rotate-text {
  animation: rotateText 5s linear infinite;
  font-size: 24px;
}
</style>
</head>
<body>
<p class="rotate-text">这是旋转文字</p>
</body>
</html>

5. 文字跳动效果

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes popText {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.pop-text {
  animation: popText 1s ease infinite;
  font-size: 24px;
}
</style>
</head>
<body>
<p class="pop-text">这是跳动的文字</p>
</body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END