站长资源
中国站长网站

纯css实现光标打字效果

效果如下:

代码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实现光标打字效果

评论 抢沙发

评论前必须登录!