導航欄中的動畫標題

Question

我試圖在導航欄中設置動畫標題。就像一個在這個網站：

http://www.danielspatzek.com/Home

我試過被動畫孔字，但它不是我在尋找：

<a>Contact</a> 
a { 
letter-spacing: 1px; 
    transition: all .1s ease-in; 
} 
a:hover { 
letter-spacing: 0.2em; 
} 

我知道，我應該使用動畫信通過信件，但我怎麼能讓他們攤開？

謝謝

Answer 1

你可以解決它像這樣

var spread = document.getElementsByClassName('spread'); 
 
[].forEach.call(spread, function(el) { 
 
    // replace the content width divs 
 
    el.innerHTML = '<span>' + el.innerText.split('').join('</span><span>') + '</span>' 
 
    // custom :hover 
 
    el.onmouseenter = function(e) { 
 
    var childern = e.target.childNodes 
 
    var width = e.target.offsetWidth/childern.length 
 
    for (var i = 0, child; child = childern[i]; i++) child.style.minWidth = width + 'px' 
 
    } 
 
    // remove custom style again 
 
    el.onmouseleave = function(e) { 
 
    var childern = e.target.childNodes 
 
    for (var i = 0, child; child = childern[i]; i++) child.style.minWidth = '0' 
 
    } 
 
})

.spread { 
 
    text-align:center; 
 
} 
 
.spread span { 
 
    display: inline-block; 
 
    transition: all .5s ease; 
 
    text-align:center; 
 
    min-width: 0; 
 
}

<h1 class="spread"> 
 
    Title 
 
</h1>

Answer 2

上給例如動畫已經由著名動畫庫Greensock實現。

如果您確實想要製作這類動畫，請使用Timelinelite和Tweenmax類讓您的手變得有點髒。