网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

如何使用CSS3模拟打字效果-创新互联

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

创新互联IDC提供业务:资阳主机托管,成都服务器租用,资阳主机托管,重庆服务器租用等四川省内主机托管与主机租用业务;数据中心含:双线机房,BGP机房,电信机房,移动机房,联通机房。

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

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

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

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

需要实现的点:

  • 怎么使用CSS让文本容器的宽度逐步增加

  • 怎么让容器每次增加的宽度等于每个字符的宽度

  • 怎么模拟光标的闪烁效果

对应实现方法:

  • 使用CSS3中的animation实现动画效果

  • 利用animation中的steps实现逐步播放动画

  • 利用文本容器的右边框动画实现光标闪烁效果

二、实现

1、英文的打字效果

如何使用CSS3模拟打字效果

html:

A miss is as good as a mile.

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模拟打字效果有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


当前名称:如何使用CSS3模拟打字效果-创新互联
网站网址:http://bjjierui.cn/article/gidcs.html

其他资讯