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

创建移动的文本装饰

1 个答案: