[分享]css3文字向上淡入

使用CSS3的动画效果，能让网页变得更加生动有趣。其中，文字向上淡入效果是一种简单而又有效果的动画。下面是该效果的示例代码： .textfadein { opacity: 0; : relative;...

使用CSS3的动画效果，能让网页变得更加生动有趣。其中，文字向上淡入效果是一种简单而又有效果的动画。下面是该效果的示例代码：

 .text-fade-in {
        opacity: 0;
        position: relative;
        top: 50px;
        -webkit-animation-name: fade-in-up;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-name: fade-in-up;
        -moz-animation-duration: 1s;
        -moz-animation-fill-mode: forwards;
        animation-name: fade-in-up;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }
    
    @-webkit-keyframes fade-in-up {
        from {
            opacity: 0;
            top: 50px;
        } 
        to {
            opacity: 1;
            top: 0;
        }
    }
    
    @-moz-keyframes fade-in-up {
        from {
            opacity: 0;
            top: 50px;
        } 
        to {
            opacity: 1;
            top: 0;
        }
    }
    
    @keyframes fade-in-up {
        from {
            opacity: 0;
            top: 50px;
        } 
        to {
            opacity: 1;
            top: 0;
        }
    } 

在代码中，我们首先定义了一个名为.text-fade-in的类，用于对应需要添加动画效果的文字区块。通过设置opacity为0和top为50px，能够让文字最开始是透明的、从上方50像素的位置进入页面。

接着，通过设置animation-name、animation-duration、animation-fill-mode来调用fade-in-up这个关键帧动画。该动画定义了文字的起始和结束状态，使得文字从初始状态逐渐向上淡入。

最终，我们可以通过HTML代码结合.text-fade-in类，让需要添加该动画效果的文字区块实现动画效果。例如：

 <div class="text-fade-in">
        <p>这是需要添加动画效果的文字区块</p>
    </div> 

通过这样的设置，文字向上淡入的效果在页面中能够生动而有趣地呈现出来。