使用CSS3模拟打字效果（代码实例）

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

html：

1

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

css实现：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

@keyframes typing {

    from { width: 0}

}

@keyframes blink-caret {

    50% { border-color: transparent; }

}

  

h1 {

    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、中文的打字效果

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

更多编程相关知识，请访问：编程入门！！

以上就是使用CSS3模拟打字效果（代码实例）的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

浅谈CSS3 grid网格布局（display: grid）的用法

CSS3 @media怎么不起作用？是什么原因？

CSS3是什么意思

CSS3常见新特性介绍

在线演示一个全屏切换效果实例

使用html5/CSS3五步快速制作便签贴特效代码示例分享（图文）

CSS3支持为网页添加多个背景图片吗

CSS3中box-sizing属性的解析（附代码）

一招搞定css不规则边框

如何让ie支持CSS3

更多相关阅读请进入《CSS3》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...