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

📅  最后修改于: 2021-11-09 08:56:08             🧑  作者: Mango

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

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

html



    
    
    Text Animation
    


    
    
        Hello!         GeeksforGeeks     
    


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


  

    
    
    Text Animation
    

  

    
        
            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



  

    
    
    Text Animation
    

  

    
        
            Hello!             GeeksforGeeks         
    
  

输出: