首页 建站教程 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中position:fixed如何实现相对于父级定位

css中position:fixed如何实现相对于父级定位

在项目开发中我们经常会用到position:fixed属性,它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间。当我们使用position:fixed定位属性时,它生...
WEB前端 2023.02.12 0 206
纯css实现菜单或列表循环向上滚动效果

纯css实现菜单或列表循环向上滚动效果

在前端开发过程中,有时候针对某个模块需要无限循环的滚动一些消息或菜单,我们常用的方法基本上都是通过js来实现,虽然代码相对来说可能会精简一些,但是对于JS不是很熟悉的同学来说还是不太好理解,毕竟相对于...
WEB前端 2022.08.17 0 855
纯CSS实现侧边栏浮动在线客服效果

纯CSS实现侧边栏浮动在线客服效果

很多人一般在网页的侧边会选择放一个悬浮的在线客服,方便意向客户的联系,网上随便一搜也会有很多代码提供,但是大多都是JS书写的,并且夹带着...
WEB前端 2022.08.17 0 434
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持