Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
a {
	text-decoration:none;
}
li {
	list-style:none;
}
html,body {
	/* font-size:12px;
	*/
	font-family:"微软雅黑",Arial;
}
body {
	background-color:#1d1f20;
}
/*最开始显示的文字开始*/
.cont {
	text-align:center;
	padding-top:200px;
}
.tips {
	display:inline-block;
	text-align:center;
	position:relative;
	color:#d7b94c;
	font-size:4em;
	padding-right:1rem;
}
.tips span {
	position:absolute;
	top:0;
	right:0;
	background:#1d1f20;
	width:100%;
	border-left:.1em solid transparent;
	-webkit-animation:typing 2s steps(16) forwards,cursor 0.8s infinite;
	animation:typing 2s steps(16) forwards,cursor 0.8s infinite;
}
@-webkit-keyframes typing {
	from {
	width:100%;
}
to {
	width:0;
}
}@-webkit-keyframes cursor {
	50% {
	border-color:white;
}
}@keyframes typing {
	from {
	width:100%;
}
to {
	width:0;
}
}@keyframes cursor {
	50% {
	border-color:white;
}
}/*最开始显示的文字结束*/

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3模拟键盘输入文字

更新时间:2020-07-14 11:05:33

0