首页 建站教程 WEB前端 正文

纯css实现光标打字效果,纯CSS打字动效

本文主要介绍了纯CSS实现打字动画效果,逐个显示一段文本中的字符,模拟出一种打字的效果,通过这种效果提升网页设计感,希望本文的介绍能够对大家的学习或工作有一定的参考学习价值...

本文主要介绍了纯css实现打字动画效果,逐个显示一段文本中的字符,模拟出一种打字的效果,通过这种效果提升网页设计感,希望本文的介绍能够对大家的学习或工作有一定的参考学习价值

效果如下:

纯css实现光标打字效果,纯CSS打字动效 光标打字效果 word break white space loading CSS打字动画 css animation 图1

创建HTML页面,在body中添加以下html代码:

<p class="load-text">loading...</p>

CSS代码:

/*光标动画*/
@keyframes caret {
	50% {
	border-color:transparent;
}
}/*文本动画:从宽度为0开始*/
@keyframes text {
	from {
	width:0;
}
}.load-text {
	width:11ch;
	margin:0 auto;
	overflow:hidden;
	word-break:keep-all;
	color:#b1f1f3;
	border-right:3px solid #000000;
	font:bold 400% monospace;
	animation:caret 0.5s step-end infinite,text 5s infinite steps(11);
}

注:css代码中width:11ch和steps(11)中的11根据字符长度设定。

打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/212.html

相关推荐

CSS心形缠绕转动效果

CSS心形缠绕转动效果

CSS心形缠绕转动效果是一种有趣的动画效果,能够给网页带来浪漫而动感的氛围。这个效果将一个心形图案无限旋转,并且同时绕着一个中心点缠绕旋...
WEB前端 2023.09.13 0 2503
制作h5常用的css3动画效果

制作h5常用的css3动画效果

css3提供了许多强大的特效,可以用来实现各种各样的效果,下面是我总结的一些常用的css3效果,有需要的可以直接引用:1.悬浮时放大:.one{transition:All 0.4s&nb...
WEB前端 2023.09.13 0 2432
发布评论

感谢您的支持