css 打字动画

tomlingtm 发布于2019-08-29 15:07 / 3352人阅读

摘要：实现思路控制文字宽度文字出现效果首先，第一步我们先做成一个动画。打字效果平滑的动画，不能够显示出打字效果，并且也没有一个一个字的出现效果这时候可以考虑一个宽度单位。

实现思路
控制文字宽度

html

loading

文字出现效果

首先，第一步我们先做成一个动画。

.loading-text {
    width: 100px;
    animation: loading-text-typing 3s;
}
@keyframes loading-text-typing {
    from {
       width: 0;
    }
 }

在上述样式以后，并没有什么效果。因为还没有处理文字,通过禁止换行 white-space 和超出部分隐藏 overflow,你至少可以得到一段平滑的文字显示动画。

.loading-text {
    ...
    white-space: nowrap;
    overflow: hidden;
}

打字效果

平滑的动画，不能够显示出打字效果，并且也没有一个一个字的出现效果,这时候可以考虑一个宽度单位 ch。ch是数字"0"的宽度。只要我们保持所有字母宽度等宽,就可以用ch来代表所有文字宽度。

一般字母都是不等宽的。如下
iiiiiii
MMMMMMM

为了等宽，我们可以设置一下font-family属性找到等宽文字。以下三个都可以

Consolas, Monaco, monospace

这时候可以使用steps函数,具体可自行查阅。实现文字一个一个的出现

.loading-text {
    ...
    font-family: Consolas, Monaco, monospace;
    width: 10ch;
    animation: loading-text-typing 3s steps(10),
}

光标效果

光标就相当于另一个动画，一闪一闪，是颜色的切换动画

.loading-text {
    animation: loading-text-caret 1s steps(1) infinite,
}
@keyframes loading-text-caret {
    50% {
       border-color: transparent;
    }
}

最终代码

css

.loading-text {
    font-family: Consolas, Monaco, monospace;
    display: inline-block;
    color: #ED6A5A;
    font-weight: bold;
    width: 11ch;
    animation: loading-text-typing 3s steps(11) infinite,
               loading-text-caret 1s steps(1) infinite;
    white-space: nowrap;
    overflow: hidden;
    border-right: 1px solid;
}

@keyframes loading-text-typing {
    from {
       width: 0;
    }
 }

@keyframes loading-text-caret {
    50% {
       border-color: transparent;
    }
}

注意
width: 11ch; ch是等宽间距，有多少字定义多少就好。我多定义了一个宽度，因为我是连续动画的原因，动画不连续就不用多1。

GPU云服务器云服务器 jquery打字动画 css3动画高性能css3动画打字

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113112.html

用JS和CSS3实现打字动画

摘要：我们经常希望一段文本中的字符逐个显示，模拟出一种打字的效果。类似于终端命令行的感觉。我们经常希望一段文本中的字符逐个显示，模拟出一种打字的效果。类似于终端命令行的感觉。最终效果用JS去实现： html： js代码： const $ = attr => document.querySelector(attr); const textDom = $(.text); const cu...

lentoo 2019-08-01 17:17 评论0 收藏0
用JS和CSS3实现打字动画

摘要：我们经常希望一段文本中的字符逐个显示，模拟出一种打字的效果。类似于终端命令行的感觉。我们经常希望一段文本中的字符逐个显示，模拟出一种打字的效果。类似于终端命令行的感觉。最终效果用JS去实现： html： js代码： const $ = attr => document.querySelector(attr); const textDom = $(.text); const cu...

ernest.wang 2019-08-20 18:25 评论0 收藏0
vue.js实现一个会动的简历(包含底部导航功能，编辑功能,添加了用户自定义写字速度功能)

摘要：好了，让我们来实现一个简单的这样打字的效果，如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件事件修饰符，自行查看官网。在网上看到一个这样的网站，STRML它的效果看着十分有趣,如下图所示:showImg(https://segmentfault.com/img/bVbqX...

luffyZh 2019-08-02 16:11 评论0 收藏0
vue.js实现一个会动的简历(包含底部导航功能，编辑功能,添加了用户自定义写字速度功能)

摘要：好了，让我们来实现一个简单的这样打字的效果，如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件事件修饰符，自行查看官网。在网上看到一个这样的网站，STRML它的效果看着十分有趣,如下图所示:showImg(https://segmentfault.com/img/bVbqX...

daydream 2019-08-23 16:46 评论0 收藏0
vue.js实现一个会动的简历(包含底部导航功能，编辑功能,添加了用户自定义写字速度功能)

摘要：好了，让我们来实现一个简单的这样打字的效果，如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件事件修饰符，自行查看官网。在网上看到一个这样的网站，STRML它的效果看着十分有趣,如下图所示:showImg(https://segmentfault.com/img/bVbqX...

FleyX 2019-08-29 18:32 评论0 收藏0