CSS几种常见的文字动态效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS几种常见的文字动态效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言：要实现CSS字体动态效果，就要用到CSS3的animation和@keyframes属性。关于这两个属性就不过多的解释了，在我上上上篇文章有过讲解在目录的‘动画和过滤样式’进入，想了解的，可以点击进入，找到目录十。

文章目录：

文字颜色闪烁效果
文字逐字出现效果
文字放大缩小效果
文字从上到下逐子出现效果

附上视频

CSS常见的动态文字

注意：

注意：文字动态效果需要要用到两个关键属性，哪两个属性呢？

animation和@keyframes属性

@keyframes关键贴：通过定义关键帧之间的样式变化来实现动态效果，可以控制元素的旋转、缩放、移动等

animation动画：通过定义一系列动画帧和动画间隔来实现复杂的动态效果，可以控制动画的时间、速度、方向和循环次数等。

在这里就不过多讲解代码的概念，主要的几个关键属性上面有注释，可以看上面，这里直接上我们字体酷酷动态的代码

一、文字颜色闪烁效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字闪烁效果</title>
    <style>
      @keyframes siz {
        0%{
          color:red;
        }
        50%{
          color:blue;
        }
        100%{
          color:green;
        }

      }

      h1{
        animation:  siz 1s linear infinite;
      }
    </style>


</head>

<body>

  <h1>半杯可可最帅</h1>

</body>
</html>

以上代码就是文字颜色闪烁效果

二、文字逐字出现效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字一个一个出现</title>
    <style>
        @keyframes siz {

            from{width: 0;}
            to{width: 100%;}

        }

        .text{

            overflow: hidden;
            white-space: nowrap;
            letter-spacing: 0.15em;
            animation: siz 3s steps(60) forwards;

        }
    </style>
</head>
<body>
    <h1 class="text">半杯可可</h1>
</body>
</html>

以上代码就是文字逐字出现效果

三、文字放大缩小效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字缩大缩小</title>
      <style>
            @keyframes siz {
                from{transform: scale(1);}
                to{transform: scale(1.5);}
            }

            .text{
                margin-left: 300px;
                animation: siz 1s ease-in-out alternate infinite;
            }
      </style>
</head>
<body>
    <h1 class = "text">半杯可可最帅</h1>
</body>
</html>

以上代码就是文字放大缩小效果

四、文字从上到下逐子出现效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字从上到下出现</title>
    <style>
        @keyframes siz {
            from{transform: translateY(-100%);}
            to{transform: translateY(0);}
        }

        .text{
            overflow: hidden;
            white-space: pre-wrap;
            animation: siz 1s ease-in-out forwards;
        }
    </style>
</head>
<body>
    <h1 class="text">半杯可可最帅</h1>
</body>
</html>

以上代码就是文字从上到下逐子出现效果