纯css实现模拟打字效果

FE情报局

发布于 2022-12-05 10:16:26

1.3K0

发布于 2022-12-05 10:16:26

文章被收录于专栏：FE情报局

模拟打字效果

前沿

看到上面的打字效果，相信大家第一时间想到的就是使用typed.js，其强大的功能，相信大家在使用的时候肯定得到了不少好处。但是如果说我只是想用一下打字效果，额外引入一个js库肯定会带来额外的负担，而且本身在功能并不繁琐的情况下，也会带来相应的成本。

当然，第三方的库自然有其对应的好处因为其更加强大，用typed.js举例，其中对于你出现的字的速度，开始结束的点，以及各种你能想到的操作都是OK的。对于这个不做过多的介绍，有兴趣的可以参考

typed.js实例

效果实现

对于上面的模拟打字效果来说，只用css如何实现？分为两部，第一个是实现文字的动画部分

// Html
// 新增一个对应的容器以及容器内需要打字效果的内容
<div class="wrapper">
    <div class="typing-demo">
      This is a typing demo.
    </div>
</div>

// Css
// 容器样式
.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

通过以上方式，我们创建了一个对应的容器，其中容器内部放置了我们需要动画的相关文字。

想象一下，对于文字的输入来说，最终其对应的宽度就是整个文字数量的一个宽度，对于一定文字数量的div来说，如何确定它的宽度，毕竟每个文字的宽度大小都是不一样的。这里我们使用ch字符宽度单位，这个单位对于大多数人来说都是陌生的。1ch表示的就是字符0的宽度单位，也就是字符0的宽度为ch的标准单位。

那么我们的文案中有22个字符，所以对于上述来说就设置好宽度为22ch即可。一直闪烁的右侧竖线我们可以使用border-right进行对应的模拟就好。

那么目前来说typing-demo的代码为

.typing-demo {
  width: 22ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}

其产生的效果是

添加动画

目前样子OK，我们来对其添加对应的动画。首先文字部分，我们知道1ch就是一个以0字符为标准的一个字符的宽度。typing-demo的样式宽度要从0开始。

.typing-demo {
  width: 22ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
  animation: typing 2s steps(22);
}
@keyframes typing {
  from {
    width: 0
  }
}

具体的step的用法可以参照steps功能介绍

到此，文字的动画就OK了

border动画

那么给border动画添加一闪一闪的效果如何搞定呢？我们需要的是等前置的动画OK之后再去搞定border动画方式。

在原来基础上再添加一个border动画，最终css代码为

.wrapper {
  height: 100vh;
  /*This part is important for centering*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.typing-demo {
  width: 22ch;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}

致此，达成开头的打字效果。可能在我们大多数人的认知中，都认为动画是那种连续的方式，但是还有这种跳步的方式，对比以下两种，可以发现明显的差别。