css实现文字输入特效

最新推荐文章于 2024-04-02 13:19:03 发布

oldfour_0830_9674

最新推荐文章于 2024-04-02 13:19:03 发布

阅读量583

点赞数

分类专栏： css 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_41163341/article/details/114770053

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

实现效果

在这里插入图片描述

实现代码

<!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>
</head>
<style>
  :root {
    font-size: 20px;
  }

  body {
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  h1 {
    font-size: 6rem;
    margin: 0;
    padding: 0;
    font-family: monospace;
    width: 3ch;
    overflow: hidden;
    animation: 2s typeing steps(8, jump-none) forwards;
  }

  @keyframes typeing {
    from {
      width: 1ch;
    }

    to {
      width: 8ch;
    }
  }
</style>

<body>
  <h1>cssStudy</h1>
</body>

</html>

ch一个长度单位

ch是一个长度单位，1ch代表一个字母或者数字0的长度。

steps()

step()函数式符号定义了一个step函数，该函数将输出值的定义域划分为等距的步。这种阶梯函数的子类有时也被称为阶梯函数。
他的值有:
jump-start 表示左连续函数，以便动画开始时发生第一步或跳转；
jump-end 表示一个右连续函数，以便在动画结束时发生最后一步或跳转；
jump-both 表示左右连续功能，包括在0％和100％标记处的停顿，有效地在动画迭代过程中添加了一步；
jump-none两端均无跳跃。而是同时保持0％和100％的标记，每个持续时间的1 / n
start 等于 jump-start
end 等于 jump-end

参考连接：
https://segmentfault.com/a/1190000007042048

oldfour_0830_9674

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css实现文字输入特效

实现代码<!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>输入文字特
复制链接

扫一扫