使用 HTML 和 CSS 更改文本颜色的文本动画

文字动画是创造美丽多彩的字母、文字和段落，具有装饰性的可移动效果。可以按照某种规则模式在区域内或跨屏幕以某种方式看到移动。

HTML 代码：在本节中，代码的基本结构是使用 HTML 设计的。文本动画是通过使用一些 CSS 属性更改文本颜色来创建的。

html

    
    
    
    


    

    

        Hello!
        GeeksforGeeks
    
    

CSS 代码：在本节中，CSS 属性用于创建文本动画。
@keyframes用于定义动画代码。动画是通过从一组 CSS 样式逐渐更改为另一组来创建的。样式或转换的变化是以百分比形式发生的，或者通过使用关键字“from”和“to” ，实际上是 0% 和 100%。可以多次更改 CSS 样式集。

@keyframes 的语法：

@keyframes animationname {keyframes-selector {css-styles;}} 

css

*{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}
body{
    background: yellowgreen;
}
.container{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.container span{
    display: block;
}
.text1{
    color: white;
    font-size: 70px;
    font-weight: 700;
    letter-spacing: 8px;
    margin-bottom: 20px;
    background: yellowgreen;
    position: relative;
    animation: text 3s 1;
}
.text2{
    font-size: 30px;
    color: darkgreen;
    font-family: Georgia, serif;
}
@keyframes text{
    0%{
        color: black;
        margin-bottom: -40px;
    }
    30%{
        letter-spacing: 25px;
        margin-bottom: -40px;
        }
    85%{
        letter-spacing: 8px;
        margin-bottom: -40px;
    }
}

完整代码：是以上两个代码段的组合。

html

  

    
    
    
    

  

    

        

            Hello!
            GeeksforGeeks
        
    

  

输出：