导航栏中的动画标题

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类让您的手变得有点脏。