[分享]css3文字逐个出现效果

CSS3文字逐个出现效果是一种常用的文本动画效果，可以让页面更加生动有趣。下面我们来介绍一下如何实现这种效果。 Hello World .textanimation { overflow: hid...

CSS3文字逐个出现效果是一种常用的文本动画效果，可以让页面更加生动有趣。下面我们来介绍一下如何实现这种效果。

 <div class="text-animation">
      <h1>Hello World!</h1>
   </div>

   <style>
      .text-animation {
         overflow: hidden;
      }
      .text-animation h1 {
         animation: text-anim 2s ease-in-out;
         opacity: 0;
      }

      @keyframes text-anim {
         0% {
            opacity: 0;
            transform: translateY(50px);
         }
         100% {
            opacity: 1;
            transform: translateY(0px);
         }
      }
   </style> 

首先，我们在HTML中加入一个包含文本的div，并设置它的class为text-animation。在div中加入标题元素h1，并在样式表中设置它的opacity为0，即初始状态为完全透明，不可见。

接下来，在样式表中，我们为text-animation类设置overflow:hidden属性，这样可以隐藏包含在元素中的内容。而在h1元素中，我们则需要定义一个动画效果，即text-anim。这个动画效果中，我们定义了0%时刻的透明度为0，位移（transform）为100px，100%时刻的透明度为1，位移为0px，表示文字一个一个逐渐出现，并往上移动50px的动画效果。

最后，在style标签中定义keyframes，即动画的关键帧，为0%与100%的状态，制定各自的属性值即可。这样就可以实现CSS3文字逐个出现效果啦！