css特效之打字机

一、前言

今天是最后一天了,撸起袖子加油干。

最近不是openai比较火吗,那我们就来仿照它实现下它的打字机效果吧。

惯例还是先讲思路,和用到的属性或者函数,最后再统一放源码。

二、过程

1、思路

首先是设置字体为等宽字体,即1em等于1字体。

然后是将宽度设为0,并且设置溢出隐藏。

通过css内置函数steps() 变成步长动画, 同时利用border-right属性,生成模拟光标,

同步上一个动画,额外实现一个闪烁效果,来模拟实际光标。

2、关键的部分

setps函数 ,有两个参数, arg1和arg2

arg1 — 表示从0%到100%需要经历多少步。

arg2 — 默认为end,可选填start

end表示在结束时期的赋值,如果播放次数超过1次,那它为默认把0%到第一步变更值作为第一步,

而不会去执行最后一步的赋值,如果只播放1次,那就不存在这个问题,将动画效果设置成forwards就可以了。

start表示在一个周期开始前进行赋值,也就没有了0%到第一步变更这一步了。

根据上面提到的最后一步不执行的问题,其实很好解决,多一步让它被丢弃就可以了。

具体看下面实现。

3、实现

我们设置一个元素,一共有8个字,也就是8em宽度。

```
<h1>欢迎各位掘友们。</h1>
```

css的部分

h1 {
        /* 本例8个文字(加标点符号);有多少个文字,width就是多少个em */
        width: 9em;
        /* 加上两个动画,一个是打字动画,使用steps让字一个一个的出现,
         注意step和字数保持一致,然后多一步用来丢弃,光标动画也是同理,*/
        animation: typingWords 5s steps(9) infinite, cursor 0.5s steps(1) infinite;
        /* 要设置不允许换行,且溢出隐藏 */
        white-space: nowrap;
        overflow: hidden;
        /* 使用右边框作为打印的指针光标 */
        border-right: 1px solid #000;
    }

    @keyframes typingWords {
        0% {
            width: 0;
        }
    }

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

我们的是循环播放的效果,一开始宽度默认为9em, 多了1em是用来给steps函数丢弃用的。

然后不设置动画的100%效果,那就会默认使用原来的样式。

基本上就是扩宽宽度,让字一个一个出现,同时让光标闪烁,形成一种打字的效果。

本文仅限于单行的效果,多行效果可以在此基础上添加。

三、小结

今天的思路比较简单 ,大家有空可以试一试。

ps: 我是地霊殿__三無,希望能帮到你(让我水完这次的日更,最后一天了,日更真的难顶)。

css特效之打字机

原文链接:https://juejin.cn/post/7231564187255701541 作者:地霊殿__三無

(1)
上一篇 2023年5月11日 上午11:03
下一篇 2023年5月11日 上午11:13

相关推荐

发表评论

登录后才能评论