搜索

当前位置:首页 > 全栈分享 > html+css > 正文

css3实现打字效果(详细解析)

发布时间:2019-01-03 23:32:25作者:魏义齐阅读:()

本文为博主原创文章,未经博主允许不得转载。

最近在优化网站的Google AdSense,关于栏目点“点击了解本站历史”发现这个由iframe载入页面的css3动画看着有点别扭,其实我是想实现打字效果的,奈何当初技术菜只是用@keyframes控制容器的宽度来显示文字,正好最近有时间就把“网站历史”的动态效果改善一下。

css3实现打字效果代码如下:

html:
  1. <p>Welcome to Wei Yiqi's personal blog.</p> 

css:

  1. @keyframes cursor { 
  2.  50% { 
  3.  border-colortransparent
  4. @keyframes text { 
  5. from { 
  6. width0
  7. p { 
  8.     width35ch; 
  9.     border-rightsolid 1px #000
  10.     white-spacenowrap
  11.     overflowhidden
  12.     font16px monospace
  13.     animation: cursor 1s infinite step-end, text 4s steps(35); 

点此测试代码

要实现此效果需要掌握几个知识点:

1.monospace

这个不常用,monospace是方形字体,也就是肉眼看到的五个m和五个i的宽度是一样的,等宽字体是让字符逐步展示的条件之一。

2.ch

这个也不常用,1ch也就是一个字符的宽度,一个英文字母是一个字符,所以上面代码中“Welcome to Wei Yiqi's personal blog.”加标点符号总共是35个字符,这个是让字符逐步展示的条件之二。

3.step,这个还是不常用。

step-end表示戛然而止,在上面的代码中它取消了光标由透明到不透明之间的过度,我把step-end取消大家来看效果:https://www.weiyiqi.net/lookdoc/typing/typing.html,你会发现光标在出现和消失之间有一个过度,step-end就是取消这个过度让光标闪烁看起来更真实。

steps()指逐步运动,也就是间断执行的动画,言外之意不一定连续的才叫动画。

关于steps功能符的深入介绍大家可以看张鑫旭的文章:https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/

就是这三个不常用的css属性实现了很多人需要用js才能实现的打字效果。

理解了这些知识点实现原理就显而易见了:用容器的右边框透明度变化来实现光标效果,让字符逐步展示来实现打字效果。我再在上面的代码后面加上注释,我想没人看不明白了:

  1. @keyframes cursor { 
  2.  50% { 
  3.  border-colortransparent;/*运动到50%时让边框变透明,0%和100%则不变*/ 
  4. @keyframes text { 
  5. from { 
  6. width0;/*容器宽度(由字符展现撑开)从零开始*/ 
  7. p { 
  8.     width36ch;/*字符数决定容器的宽度*/ 
  9.     border-rightsolid 1px #000;/*光标样式*/ 
  10.     white-spacenowrap;/*禁止分行*/ 
  11.     overflowhidden;/*禁止分行后文字会超出容器,用overflow: hidden;来隐藏*/ 
  12.     font16px monospace;/*字体大小和等宽字体*/ 
  13.     animation: cursor 1s infinite step-end, text 4s steps(36);/*光标每一秒闪一次且无限循环,容器(字符)在4秒内分36步展现完*/ 

需要注意的是一个汉字是两个字符,也就是容器宽度是步数的两倍。

最近在看张鑫旭的《css世界》,买回来就忍俊不禁看了三个小时,其实我们掌握的css都是表层的,而张鑫旭的css很多可以实现js才可以实现的效果。
css世界

本文标签:,您可以阅读与「」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

相关阅读

    无相关信息

上一篇:css3背景色渐变的动画实例应用下一篇:一场由css代码里“{}”前的空格引起的风波

赞助本站

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包