[分享]css3文字动画特效代码

CSS3文字动画特效是目前非常流行的一种网页设计技术。它可以使文字在网页上呈现出一些生动、灵动的效果，非常吸引人眼球，增加了网页的美观性和趣味性。下面我们就来介绍一些常用的CSS3文字动画特效和它们的...

CSS3文字动画特效是目前非常流行的一种网页设计技术。它可以使文字在网页上呈现出一些生动、灵动的效果，非常吸引人眼球，增加了网页的美观性和趣味性。下面我们就来介绍一些常用的CSS3文字动画特效和它们的代码实现。
1. 抖动效果
借助 @keyframes 关键字和 transform 属性，可以轻松实现文字的抖动效果。代码如下：

p {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both infinite;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
} 

2. 打字机效果
通过使用 CSS3 的 animation 属性，可以非常方便地实现一个文字打字机效果，让文字一个一个地逐渐显示出来。代码如下：

p {
  animation: typing 2s steps(20, end) both;
}
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
} 

3. 跑马灯效果
通过 CSS3 的 transition 属性和 transform 属性，可以实现一个跑马灯效果，让文字围绕着一个圆周旋转，非常炫酷。代码如下：

p {
  transform-origin: center center;
  transition: transform 0.7s ease;
}
p:hover {
  transform: rotate(360deg);
} 

4. 缩放效果
通过 CSS3 的 animation 属性，可以实现一个文字缩放效果，让文字放大、缩小、再放大，非常有趣。代码如下：

p {
  position: relative;
  animation: scale 4s infinite;
}
@keyframes scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
} 

总结：以上是几种常用的 CSS3 文字动画特效和代码实现，希望对大家有所帮助。如果想要更加炫酷的效果，可以多去尝试和实践，相信你一定会有很多收获。