如何使用CSS3模拟打字效果

发布时间:2020-12-23 09:43:09 作者:小新
来源:亿速云 阅读:263

小编给大家分享一下如何使用CSS3模拟打字效果,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

一、使用CSS3实现打字效果原理

要模拟打字的效果,就需要让字符一个一个逐步显示。

这里是通过改变容器的宽度,让容器的宽度从0逐步增加,每次增加的宽度为每个字符的宽度,这样就可以模拟打字的效果。

为了增强真实性,可以加上光标的闪烁效果,这样就可以比较好的模拟出打字的效果了。

需要实现的点:

对应实现方法:

二、实现

1、英文的打字效果

如何使用CSS3模拟打字效果

html:

<h2>A miss is as good as a mile.</h2>

css实现:

@keyframes typing {
    from { width: 0}
}
@keyframes blink-caret {
    50% { border-color: transparent; }
}
 
h2 {
    font: 200% monospace;
    border-right: .08em solid;
    width: 28ch;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 10s steps(28, end),
               blink-caret .5s step-end infinite alternate; //这里的alternate是为了让光标闪烁的正常一点
}

这里因为是实现英文的打字效果,所以字体使用的是等宽字体:monospace,配合长度单位 ch (1ch就是当前字体下数字0的宽度),在等宽字体下,其它字符的宽度也等于1ch。这样就可以设置文本容器的宽度 = 所有字符个数 * 1ch。

让文本容器的宽度从0逐步增加到实际宽度利用的是animation的steps。

steps可以让动画分成多少步去播放,像这里因为有28个字符,要让一个一个字符显示,就把连续的动画分成28步来播放。

blink-caret动画是实现光标的闪烁效果的,改变右边框的透明度重复播放实现。

2、中文的打字效果

如何使用CSS3模拟打字效果

中文的打字效果和英文不同的点就在于在等宽字体monospace下,中文的一个字符等于 2ch,所以文本容器的宽度 = 中文字符个数 * 2ch。

看完了这篇文章,相信你对如何使用CSS3模拟打字效果有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. js+css实现打字效果
  2. 使用JavaScript怎么实现一个自动打字效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:css让图片向左移动的方法

下一篇:css径向渐变的使用方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》