2015-11-02 24 views
5

當我的網頁加載時,使用CSS,我希望文本「小部件世界」出現在頂部,就好像有人正在手動編寫它一樣;一次會出現一封信。如何淡入/一次顯示一個字母?

我打算使用草書字體。每個出現的字母之間會有幾毫秒的延遲。

我以爲每個字母都是一個單獨的div,然後逐一淡化它們。

+1

您正在尋找這樣的事情? http://lab.tylergaw.com/css-write-on/ –

+3

http://stackoverflow.com/questions/29911143/how-can-i-animate-the-drawing-of-text-on-a-web -page – Quantastical

回答

14

下面是你正在尋找的東西的片段。

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>

+0

我喜歡這個!非常簡單(對我來說)比http://stackoverflow.com/questions/29911143/how-can-i-animate-the-drawing-of-text-on-a-web-page – dot

1

這裏,你會怎麼做一個簡單的例子:

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>

1

也許這樣會適合你:固定寬度內聯塊和減少或增加其寬度的動畫

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>