首页 前端知识 CSS几种常见的文字动态效果

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

2024-02-03 12:02:44 前端知识 前端哥 347 87 我要收藏

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

文章目录:

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

附上视频

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>

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

总结:

以上是几个比较简单的文字动态效果示例,你还可以根据自己的需求和创意进行修改和组合。这些示例多练几遍,然后自己进行创意组合出不同的效果是可以做到的哦!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1148.html
标签
评论
发布的文章

jQuery ---- 插件

2024-02-15 14:02:06

CSS-JavaScript-Jquery-Servlet

2024-02-15 14:02:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!