<sytle>
.typing{
display: inline-block;
width: 100%;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 2s steps(50, end) alternate;
animation: type 2s steps(50, end) alternate;
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-iteration-count: infinite;
}
@keyframes type{
from { width: 0; }
}
@-webkit-keyframes type{
from { width: 0; }
}
<style>
<div id="top" class="header">
<div class="text-center">
<h1 class="typing" >
<b>Find anything for your Business Instantly</b>
<b>Source >> Supply >> Grow your Business Online</b>
<b>Create your Home & Global website online</b>
</h1>
</div>
</div>
我有3个粗体标签,位于h1标签中,此处应显示在一行中,作为一个又一个粗体标记,如链接see this link : http://www.indiamart.com/
所示任何人都可以帮助我。
答案 0 :(得分:1)
原始代码Lea Verou
@-webkit-keyframes typing {
from { width: 0 }
to { width:16.3em }
}
@-moz-keyframes typing {
from { width: 0 }
to { width:16.3em }
}
@-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
@-moz-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
body { font-family: Consolas, monospace; }
h1 {
font-size:150%;
width:16.3em;
white-space:nowrap;
overflow:hidden;
border-right: .1em solid black;
-webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
blink-caret 1s step-end infinite;
-moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
blink-caret 1s step-end infinite;
}
<h1>This is a css typewriter</h1>
答案 1 :(得分:0)
使用关键帧向html元素添加输入动画。
.text {
font: bold 200% Consolas;
border-right: .1em solid black;
width: 28ch;
white-space: nowrap;
overflow: hidden;
margin: 30px;
-webkit-animation: type 4s steps(28, end),
blink-caret .4s step-end infinite alternate;
}
@-webkit-keyframes type { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }
<p class="text">Stay Hungry ! Stay Foolish !</p>
在此处查看演示: - http://codingflag.in/mysketch.php?sketch=6