CSS-전환 글꼴 크기가

그냥 효과 당신이 여기에서 찾을 수 있습니다 모방하려고 작동하지 않습니다 목록 항목에CSS-전환 글꼴 크기가

(상단 메뉴, 마우스를 이상 항목이 오른쪽으로 이동하고 두 가지를 얻을 수 앞쪽의 화살표)

나는이 두 화살표를 작동 시키려고 노력하고있다. 나는 바른 일로 옮겼다. 화살표는 0px에서 10px로 전환 및 글꼴 크기를 사용하려고했습니다. 어떤 아이디어? 가능한 경우 CSS를 사용하고 싶습니다.

건배 숨기고 당신이 아래 그 전환을 추가하는 span 태그를 보여 margin-left을 사용할 수 있습니다

대신 글꼴 크기 0px to 10px에서 증가 font-size를 사용

출처

2017-10-10 D. Astl

화살표가'font-size'를 사용하는 이유는 무엇입니까? –

안녕하세요. 별개로 변환하려고 시도한 에 ">>"을 넣었습니다. 나는 단지 이미지를 사용할 수있을 것 같아. 나는 그것이 왜 효과가 없을지 궁금해하고 있습니다. –

ul { 
 
    padding: 0; 
 
    margin: 40px; 
 
    overflow: hidden; 
 
} 
 

 
ul > li { 
 
    list-style-type: none; 
 
} 
 

 
ul > li > span { 
 
    margin-left: -10px; 
 
    transition: 0.5s ease; 
 
} 
 

 
ul > li:hover > span { 
 
    margin-left: 0px; 
 
}

<ul> 
 
    <li><span>></span> Home</li> 
 
    <li><span>></span> About</li> 
 
    <li><span>></span> Contact</li> 
 
</ul>

출처

2017-10-10 15:07:06 frnt

@D. 여기 Astl font-size는 스케일링 효과를 주지만, 마우스를 올리면 마우스를 올려 놓고 가리개를 숨기려면 음수 여백을 사용하십시오. – frnt

Doh, 나는 그것을 생각할 수 있었다. :-) 고마워, 내가 이것을 사용할 것 같아. –

답변

관련 문제