움직이는 텍스트 장식 만들기

-1

움직이는 텍스트 장식을 만드는 방법 this 사용자가 "about", "companies", "blog"를 가리키면 선이 움직이는 것을 볼 수 있습니다. 어떻게 그 아이디어를 만들 수 있을까요? 감사합니다 :)움직이는 텍스트 장식 만들기

출처

2014-04-25 user3453264

힌트는 해당 페이지로 이동하고 마우스 오른쪽 버튼을 클릭하여 많이 설명 할 요소를 확인하고 –

호버의 배경 위치를 조정합니다. 나는 100 % 확신 할 수 없기 때문에 js를 의심 할 것이다. css3 looping transition을 가질 수있다. –

안녕하세요. 요소를 검사했습니다. 범위 내에 있지만 소수 자리가 변경됩니다. 나는 코딩에 익숙하지 않으므로 확신 할 수 없다. 너는 나에게 구글에 대한 힌트를 줄 수있다. 그게 너무 좋을거야. 감사합니다 – user3453264

사용 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;} 
}

그리고는 입니다

출처

2014-04-26 00:20:46

환영 친구 : D –

움직이는 텍스트 장식 만들기

답변

관련 문제