Quando la mia pagina web si carica, usando css, voglio che il testo "mondo widget" appaia in alto come se qualcuno lo stesse scrivendo manualmente; apparirebbe una lettera alla volta.Come sfumare/rivelare una lettera alla volta?
Ho intenzione di usare un carattere in corsivo. Ci sarebbe un ritardo di alcuni millisecondi tra ogni lettera che appare.
Ho pensato di trasformare ogni lettera in un div separato e poi sfumarli uno per uno.
Ecco uno snippet per qualcosa che stai cercando.
p{
color: Pink;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: type 4s steps(60, end);
}
@keyframes type{
from { width: 0; }
}<p>Hi folks, this is typing animation using CSS</p>Amo questo! molto più semplice (per me) di http://stackoverflow.com/questions/29911143/how-can-i-animate-the-drawing-of-text-on-a-web-page – dot
Ecco un semplice esempio di quello che si potrebbe fare:
var text = 'Widget World';
var textElements = text.split("").map(function(c) {
return $('<span id="' + c + '">' + c + '</span>');
});
var el = $('#letters');
var delay = 50; // Tune this for different letter delays.
textElements.forEach(function(e, i) {
el.append(e);
e.hide();
setTimeout(function() {
e.fadeIn(300)
}, 100 + i * delay)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="letters"></div>Forse in questo modo misura voi: larghezza fissa per inline-block e animazione per diminuire o aumentare la sua larghezza
div {
display: inline-block;
overflow: hidden;
white-space: nowrap;
animation: example 2s linear 0s infinite alternate;
}
@keyframes example {
from {
width: 0;
}
to {
width: 150px;
}
}<div>some text</div>
Sei alla ricerca di qualcosa di simile? http://lab.tylergaw.com/css-write-on/ –
http://stackoverflow.com/questions/29911143/how-can-i-animate-the-drawing-of-text-on-a-web -pagina – Quantastical