javascript - 创建移动的文本装饰

Question

我如何制作像this这样的移动文字装饰？查看当用户将鼠标悬停在“关于”、“公司”、“博客”上时，线条会移动。知道如何创建它吗？谢谢:)

Answer 1

使用 CSS3 动画:

HTML:

<div id="test">
<h2>Some title</h2>
<p>Lorem ipsum dolor sit amet, omnesque accusata pro ei. Ex vocibus pertinax facilisis mei, sit verterem adolescens ea. Ut ius tota tritani. Sumo rebum conclusionemque et usu. Duo deleniti delicata ei. Est magna graeci in, ludus officiis efficiendi ius ex.</p>

CSS:

#test {
    display:block;
    background:url('http://launchpad.la/wp-content/themes/launchpad-la/resources/css/images/nav-retina-red.png') repeat-x;
    width:200px;
    height:3px;
}
#test:hover {
    animation:move 3s ease-in infinite;
    -webkit-animation:move 3s ease-in infinite;
    -moz-animation:move 3s ease-in infinite;
    -ms-animation:move 3s ease-in infinite;
}
@keyframes move {
    from{background-position:0px 0px;}
    to {background-position:1000px 0px;}
}
@-webkit-keyframes move {
    from{background-position:0px 0px;}
    to {background-position:1000px 0px;}
}
@-moz-keyframes move {
    from{background-position:0px 0px;}
    to {background-position:1000px 0px;}
}
@-ms-keyframes move {
    from{background-position:0px 0px;}
    to {background-position:1000px 0px;}
}

这是一个 FIDDLE