Wie schreibe ich CSS Animation für die Texteingabe?

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

i 3 fett-Tags, die in H1-Tag ist, hier sollte es in einer Zeile, wie einer nach der anderen fett Tag anzuzeigen, wie in dem Link see this link : gezeigt http://www.indiamart.com/Wie schreibe ich CSS Animation für die Texteingabe?

Bitte kann mir jemand helfen.

Quelle

2016-04-02 Syed Rehaman

Ich denke you'l einen ** Brief benötigen ** Wähler, die in CSS nicht verfügbar ist. Sie sollten wahrscheinlich eine js-Lösung versuchen. –

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

Quelle

2016-04-02 06:42:47 John

Vielen Dank für Ihre Hilfe, aber hier brauche ich drei b Tags und es sollte sich gegenseitig überschreiben. Und ich habe es bereits versucht –

Ich glaube nicht, dass es eine Schreibmaschine in Ihrem Link ist. Dies ist nur ein 'div' mit' overflow: hidden' und ein mit Animation, denke ich. – John

Verwenden Keyframes um die Eingabe einer Animation hinzufügen Elemente in 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>

Siehe Demo hier: - http://codingflag.in/mysketch.php?sketch=6

Quelle

2016-07-25 08:19:49

Wie schreibe ich CSS Animation für die Texteingabe?

Antwort

Verwandte Themen