css3 文字显示特效

CSS3是CSS的新版本，包含一些新的功能和属性，其中之一是可以创建出许多炫酷的文字显示特效。在这里，我们将介绍一些常用的CSS3文字特效，为你带来更多的灵感和实用技巧。

/* 文字颜色渐变 */
h1 {
  background: -webkit-linear-gradient(left,#f1c40f 0%,#e67e22 25%,#e74c3c 50%,#9b59b6 75%,#3498db 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 80px;
}

/* 字体大小缩放 */
h2 {
  font-size: 60px;
  transition: all 0.3s ease-in-out;
}

h2:hover {
  font-size: 80px;
}

/* 文字阴影 */
h3 {
  font-size: 50px;
  text-shadow: 5px 5px #888;
}

/* 文字描边 */
h4 {
  font-size: 40px;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #000;
}

/* 文字旋转 */
h5 {
  font-size: 30px;
  transform: rotate(45deg);
}

/* 文字出现动画 */
h6 {
  font-size: 20px;
  opacity: 0;
  animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

以上代码演示了如何使用CSS3来创建文字颜色渐变、字体大小缩放、文字阴影、文字描边、文字旋转以及文字出现动画等效果。通过使用这些特效，我们可以让文字更加具有艺术感和吸引力，让网页设计更为生动和有趣。