目 录CONTENT

文章目录

CSS实现打字效果

Hello!你好!我是村望~!
2022-08-10 / 0 评论 / 0 点赞 / 238 阅读 / 589 字
温馨提示:
我不想探寻任何东西的意义,我只享受当下思考的快乐~

网页设计变得越来越有创意。在 CSS 动画的协调下,你的网页会像活的一样。在这个例子中,我们将使用 animation 和 @keyframes 属性去实现打字效果。

具体来说,在这个演示中,我们通过 steps()属性来实现分割文本的效果。

首先,你必须指定 step() 中传入的数量,在这个例子中就是文本的长度。

接着,第二步,我们使用 @keyframes 去声明什么时候开始执行动画。

如果你在文本 Typing effect for text 后面添加内容,而不改变 steps() 中的数字,将不会产生这种效果。这种效果并不是特别新鲜。然而,很多开发者却使用 JavaScript 库去实现,而不是使用 CSS

  • steps 可以理解我动画通过 steps 指定的步数去完成!

  • monospace字体下等宽字体 ********ch 单位1ch就是0的宽度(应该也是一个空格/英文字母的宽度)。3ch宽的div就只能装下三个0,在字体为等宽字体的情况下,一个汉字的宽度为2ch

    ![图片中的这个div的宽与高都是5ch。]Untitled

    图片中的这个div的宽与高都是5ch。

<div class="typing">
    <div class="typing-effect">
      I have a great dream!
    </div>
</div>

效果!
1-1660115644279

body{
  min-height:100vh;
  background-color:#fff000;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:33px;
}
.typing {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.typing-effect {
  width: 22ch; /*和字体宽度保持一致,或者可以大一点*/
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  animation: typing 2s steps(22)  /* 用来分步执行动画! */
    , effect .5s step-end infinite alternate; /* 边框透明度闪烁效果! */
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes effect {
  50% {
    border-color: transparent;
  }
}

当然你可以 通过指定其他第一个分步,往复完成打字

animation: typing 2s steps(22) infinite alternate /* 用来分步执行动画! */
    , effect .5s step-end infinite alternate; /* 边框透明度闪烁效果! */

1 1

0

评论区