CSS几种常见的文字动态效果

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

前言要实现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>

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