<!DOCTYPE html>
<html>
<head>
<title>Welcome to HNQingyun</title><!--页面标题显示-->
<meta charset="utf-8">
<style type="text/css">
body {
background: black;/*页面背景颜色*/
}
p
{
color: green;/*段落字体颜色*/
font-size: 60px;/*字体大小*/
border-right: 3px green solid;/*设置右边框的样式,可设置宽度、颜色、样式*/
width: 6em;/*段落宽度*/
animation: textWider 5s steps(6) , caret .8s steps(1) infinite;
white-space: nowrap;/*规定段落中的文本不进行换行*/
overflow: hidden;/*属性规定当内容溢出元素框时发生的事情*/
}
@keyframes textWider{
0%
{
width: 0em;
}
100%{
width: 6em;
}
}
@keyframes caret {
50%{
border-color: transparent;
}
}
</style>
</head>
<body>
欢迎欢迎欢迎
</body>
</html>
<html>
<head>
<title>Welcome to HNQingyun</title><!--页面标题显示-->
<meta charset="utf-8">
<style type="text/css">
body {
background: black;/*页面背景颜色*/
}
p
{
color: green;/*段落字体颜色*/
font-size: 60px;/*字体大小*/
border-right: 3px green solid;/*设置右边框的样式,可设置宽度、颜色、样式*/
width: 6em;/*段落宽度*/
animation: textWider 5s steps(6) , caret .8s steps(1) infinite;
white-space: nowrap;/*规定段落中的文本不进行换行*/
overflow: hidden;/*属性规定当内容溢出元素框时发生的事情*/
}
@keyframes textWider{
0%
{
width: 0em;
}
100%{
width: 6em;
}
}
@keyframes caret {
50%{
border-color: transparent;
}
}
</style>
</head>
<body>
欢迎欢迎欢迎
</body>
</html>