这篇文章发布于 2019年01月10日,星期四,00:32,归类于 CSS相关。 阅读 43972 次, 今日 19 次 11 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8357
本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。
一、文字打印效果预览
模拟编辑器,或者输入框中文字啪啦啪啦输入的效果,纯CSS实现,这种效果可以用在在线版简历,或者年终盘点活动上。
实现效果如下GIF截图:
动画效果主要由两部分组成,一部分是文字依次呈现,另外一部分就是光标的不断闪烁。
您可以狠狠地点击这里:纯CSS实现打字效果(带音效)demo
demo页面还配了打字键盘音效,锦上添花,效果绝佳,点击页面按钮即可听到:
二、CSS打印机效果的实现
HTML很简单,如下:
<p class="typing">简易中文打字效果,作者:张鑫旭</p>
CSS代码如下:
.typing { width: 15em; white-space: nowrap; border-right: 2px solid transparent; animation: typing 3.5s steps(15, end), blink-caret .75s step-end infinite; overflow: hidden; } /* 打印效果 */ @keyframes typing { from { width: 0; } to { width: 15em; } } /* 光标闪啊闪 */ @keyframes blink-caret { from, to { box-shadow: 1px 0 0 0 transparent; } 50% { box-shadow: 1px 0 0 0; } }
可以看到其实实现原理很简单,打字效果其实就是改变容器的宽度实现的。
然后其中有一些细节可以提一下:
- 15em宽度是因为正好15个中文,宽度是15em。
white-space:nowrap
是为了保证一行显示,如果我们固定一行高度的话,这个CSS声明理论上可以不要。- steps之前有专门写文章深入介绍过,可参见“CSS3 animation属性中的steps功能符深入介绍”一文。可以让动画断断续续,而非连续执行。
- 光标使用的是
box-shadow
模拟的,为什么不使用border
呢?因为border
被用来实现光标和文字撑开2像素间隙。因为overflow:hidden
溢出剪裁是相对于border-box
的,使用padding-right
会露出几像素文字,效果就不完美了。当然,你也可以使用::after
伪元素模拟,定位在最后,要更灵活些。 - 这个效果的光标颜色是跟着文字颜色走的,例如,我们设置文字颜色为红色,则呈现效果如下图:
另外,你可以不知道的是浏览器原生的光标颜色是可以设置的,方法还不止一个,有兴趣可以参见我之前的文章:“CSS改变插入光标颜色caret-color简介及其它变色方法”。
三、中英文混合打字效果实现
CSS实现打字效果的优点是简单快捷,不足就是上面的方法如果是中英文混合的,就有些吃力,不过也不是没有办法实现,我们可以定死高度为一行内容,让字符自然排列,这样,可以保证字符内容永远不会截断,因为不同字符程序时机有差异,反而效果更显真实。
效果如下GIF截图示意:
您可以狠狠地点击这里:纯CSS实现中文英文打字效果demo
相关CSS如下:
.typing { width: 18.5em; height: 1.25em; border-right: 1px solid transparent; animation: typing 3.5s steps(37, end), blink-caret .75s step-end infinite; font-family: Consolas, Monaco; word-break: break-all; overflow: hidden; } /* 打印效果 */ @keyframes typing { from { width: 0; } to { width: 18.5em; } } /* 光标闪啊闪 */ @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: currentColor; } }
和上面中文实现区别在于:
- 去除
white-space:nowrap
,没有强制单行显示,保证不会出现字符阶段场景。 - 设置等宽字体,这样宽度更好计算。关于等宽字体可以参见我之前文章“等宽字体在web布局中应用以及CSS3 ch单位”。
word-break:break-all
使英文字符可以一个一个呈现。steps
功能符后面的数量正好是宽度的2倍,这样,每次step就移动0.5em宽度,正好是1/2中文和近似一个英文字符的宽度。
四、结语
应该还有其他更好的CSS实现方法,欢迎补充,欢迎交流。
困了,老婆已经站在身后了,今天不扯淡了,催着睡觉了。
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:https://www.zhangxinxu.com/wordpress/?p=8357
(本篇完)
- 等宽字体在web布局中应用以及CSS3 ch单位嘿嘿 (0.273)
- CSS改变插入光标颜色caret-color简介及其它变色方法 (0.256)
- CSS3 animation属性中的steps功能符深入介绍 (0.187)
- 时隔两年,Chrome也支持round等CSS数学函数了 (0.187)
- CSS3 transform对普通元素的N多渲染影响 (0.102)
- flex-end为什么overflow无法滚动及解决方法 (0.102)
- 还有完没完,怎么又来了个 scrollbar-gutter? (0.102)
- CSS overflow-clip-margin属性简介 (0.102)
- 小tip: CSS3 animation渐进实现点点点等待提示效果 (0.073)
- URL锚点HTML定位技术机制、应用与问题 (0.073)
- JS护航下CSS3效果的渐进增强使用 (RANDOM - 0.017)
不知能否实现多行,自动换行
同问
由此是不是可以再做一个ktv歌词过渡效果,期待中(手动滑稽)。
看了你的几篇box-shadow的文章,启发很大。感觉box-shadow本质上就是对元素的形状进行复制,可以产生任意位置、尺寸和颜色的复制体,还能随着border-radius和transform的改变而改变。多个复制体如果进行组合,还能产生各种不同的形状。这样如果写个js插件改变box-shadow的值,甚至能做些俄罗斯方块等小游戏了。而且相比较canvas,css天然支持动画。
为啥技术文章,最后感觉被插了一刀暴击9999呢?
张大大,这样实现多行打字可以吗,还有更好的方式么
簪子上有八个字,便是仅算粗通
文墨的少女,也觉得极为动人。
言念君子,温其如玉。
/* 光标闪啊闪 */// box-sizing 是border-box
@keyframes blink-caret {
from, to { box-shadow: 4px 0 0 0 #fff, 5px 0 0 0 transparent; }
50% { box-shadow: 4px 0 0 0 #fff, 5px 0 0 0; }
}
.typing1 {
width: 14em;
line-height: 1.2;
white-space: nowrap;
animation: typing1 7s steps(14, end), blink-caret .5s step-end 14;
overflow: hidden;
}
@keyframes typing1 {
from { width: 0; }
to { width: 14em; }// 与字数相同
}
.typing2 {
width: 14em;
line-height: 1.2;
white-space: nowrap;
animation: typing2 7s 7s steps(14, end), blink-caret .5s step-end 14;
animation-delay: 7s;
animation-fill-mode: backwards;
overflow: hidden;
}
@keyframes typing2 {
from { width: 0; }
to { width: 14em; }// 与字数相同
}
.typing3 {
width: 10em;
line-height: 1.2;
white-space: nowrap;
animation: typing3 5s 14s steps(10, end), blink-caret .5s step-end infinite;
animation-delay:14s;
animation-fill-mode: backwards;
overflow: hidden;
}
@keyframes typing3 {
from { width: 0; }
to { width: 10em; }// 与字数相同
}
張老師您好,我是來自台島的讀者,您的網站使我受益良多,也掏腰包買了您的著作了。謝謝您的分享
感谢支持~
老婆站在身后的感觉,深有体会
这是高手
学习一波