使用CSS3 Animation实现输入文字动画

最新推荐文章于 2024-08-31 15:41:55 发布

csdn产品小助手

最新推荐文章于 2024-08-31 15:41:55 发布

阅读量867

点赞数

文章标签：前端 java ViewUI

原文链接：https://juejin.im/post/5a31012d6fb9a04506719ed9

版权

单行输入实现关键点: 宽度单位ch, 使用等宽字体

<h1>hello, my name is MaGua.</h1>
复制代码

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
h1 { 
	font: bold 200% Consolas, Monaco, monospace;
	border-right: .1em solid;
	width: 24ch; /* 与字符数等值 */
	margin: 2em 1em;
	white-space: nowrap;
	overflow: hidden;
	animation: typing 12s steps(24, end), /* step数等于字数 */
	           blink-caret .5s step-end infinite alternate;
}
复制代码

多行输入实现

<h1 id='header-1'>hello, my name is MaGua.</h1>
<h1 id='header-2'>You're the best mistake I've ever made.</h1>
复制代码

@keyframes typing { from { width: 0; } }
@keyframes typing2 { to { width: 40ch; } }
@keyframes blink-caret { 50% { border-color: black; } }

#header-1 { 
	font: bold 300% Consolas, Monaco, monospace;
	border-right: .1em solid transparent;
	//width: 100px; /* fallback */
	width: 24ch; /* 与字符数等值 */
	margin: 2em 1em;
	white-space: nowrap;
	overflow: hidden;
	animation: typing 12s steps(24, end), /* step数等于字数 */
	           blink-caret .5s step-end 24 alternate;
}
#header-2 { 
	font: bold 300% Consolas, Monaco, monospace;
	border-right: .1em solid transparent;
	width: 0;
	margin: 2em 1em;
	white-space: nowrap;
	overflow: hidden;
	animation: typing2 20s 12s steps(40, end) forwards, /* step数等于字数 */
	           blink-caret .5s 12s step-end infinite alternate;
}
复制代码

中文实现

<p>敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏</p>
复制代码

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
p { 
    font: 400 200%;
    border-right: .1em solid;
    width: 53.2ch; /* 1.6625倍字数 */
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 16s steps(32, end), /* step数等于字数 */
               blink-caret .5s step-end infinite alternate;
}
复制代码

转载于:https://juejin.im/post/5a31012d6fb9a04506719ed9