Как написать анимацию css для ввода текста?

<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>

У меня есть 3 смелые теги которых находится в теге h1, здесь он должен отображаться в одной строке, как один за другим жирным теге, как показано в ссылке see this link :http://www.indiamart.com/Как написать анимацию css для ввода текста?

Пожалуйста, кто может мне помочь.

источник

2016-04-02 Syed Rehaman

Я думаю you'l нужен ** письмо ** селектор, который не доступен в CSS. Вероятно, вы должны попробовать js-решение. –

оригинальный код 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>

источник

2016-04-02 06:42:47 John

Благодарим вас за помощь, но здесь мне нужны три тега b, и они должны переопределять друг друга. И я уже пробовал это –

Я не думаю, что это эффект пишущей машинки в вашей ссылке. Это просто 'div' с' overflow: hidden' и a с анимацией на нем, я думаю. – John

Используйте KeyFrames добавить печатающий анимацию HTML элементов.

.text { 
 
\t font: bold 200% Consolas; 
 
\t border-right: .1em solid black; 
 
\t width: 28ch; 
 
\t white-space: nowrap; 
 
\t overflow: hidden; 
 
\t margin: 30px; 
 
\t -webkit-animation: type 4s steps(28, end), 
 
\t 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

источник

2016-07-25 08:19:49

Как написать анимацию css для ввода текста?

ответ

Смежные вопросы