css 多行文字依次出现动画

在网页开发中，CSS 动画是非常重要的一部分，它可以让网页更加生动和具有交互性。今天我们来学习一种实现多行文字依次出现动画的方式。

code>
    /* HTML 代码 */div class="text">
       p>
    第一行文字/p>
       p>
    第二行文字/p>
       p>
    第三行文字/p>
       p>
    第四行文字/p>
    /div>
/* CSS 代码 */.text {
       overflow: hidden;
 /* 隐藏溢出的部分 */}
.text p {
       opacity: 0;
     /* 初始设置透明度为 0 */   animation: fade-in 0.5s ease-in-out forwards;
     /* 应用动画 */   animation-delay: 0.5s;
 /* 设置延迟时间 */}
@keyframes fade-in {
   from {
     opacity: 0;
     transform: translateY(20px);
 }
 /* 初始状态 */   to {
     opacity: 1;
     transform: translateY(0);
 }
 /* 终止状态 */}
    /code>
    

我们首先给文本容器设置了 overflow: hidden; ，这样可以隐藏超出容器的文本，然后在每个文本元素中设置 opacity: 0; ，并应用了 animation: fade-in 0.5s ease-in-out forwards; 动画属性，表示在 0.5 秒内，将透明度从 0 变为 1，并同时移动到垂直方向上的位置。

另外，我们还设置了动画延迟时间为 0.5 秒，这样就可以让文本依次逐行出现了。

最后，我们还定义了一个 @keyframes 规则，它描述了动画从开始到结束的状态。在这里，我们设置了从透明度为 0、垂直位置偏移 20 像素，到透明度为 1、垂直位置不偏移的过渡效果。

这样，我们就完成了多行文字依次出现动画的效果。尝试使用这种方式，让你的网页更生动有趣吧！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！