css - 如何为文本输入编写 css 动画?

标签 css animation

<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 &amp; Global website online</b>
    </h1>        
</div>
</div>

我在h1标​​签中有3个粗体标签,这里应该显示在一行中,作为一个接一个的粗体标签,如链接中所示see this link : http://www.indiamart.com/

谁能帮帮我。

最佳答案

原始代码 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>

关于css - 如何为文本输入编写 css 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36370041/

相关文章:

html - 用 flexbox 和 :after 定位元素

javascript - 文本区域自动调整高度

html - 网站图标不工作

javascript - 在元素上启动动画的捕获函数

html - 如何使用 CSS 选择器获取 DIV 元素中存在的最大值?

html - Twitter Bootstrap Modal 未出现在用户 View 中

javascript - 切片颜色的谷歌饼图动画

animation - 他们是怎么做到的?按键文字动画

ios - Swift tvOS - 当用户按下 MENU 按钮时暂停 UIImage 动画

ios - Swift:来自中心的 UIBezierPath 描边动画