CSS 호버 효과에 대한 일반적인 마크 업은 무엇입니까?

Question

내가 다음 링크에서 멋진 아이콘 애니메이션을 복사하려고 : 사이트가 그 일에 어떤 지침을 제공하지 않습니다

http://tympanus.net/Development/IconHoverEffects/#set-1

때문에, 나는 로컬하지만 불행히도 실패를 설정했습니다. 내가 얻을 수있는 가장 좋은 것은 빈을 표시하는 것이었다 <a>.

아이콘이 실제로 렌더링 될 때 누구든지 설명 할 수 있습니까? 누군가가 바이올린이나 다른 것을 만들 수 있다면 정말 고맙겠습니다. 감사!

Answer 1

이 예제에서는 'font-family :'ecoicon ';' Github

에서 전체 예제를 다운로드 할 수 있습니다. 첨부 파일 ecoicon font here을 볼 수 있습니다. 호브 효과를

: 이 아이콘을 마우스를하면서 부드러운 배경 색상 변화를 얻기 위해 둥근 모양과 transition 효과를 얻기 위해 border-radius: 50%;을 사용했다.

.hi-icon-effect-1 .hi-icon { 
    background: rgba(255, 255, 255, 0.1); 
    -webkit-transition: background 0.2s, color 0.2s; 
    -moz-transition: background 0.2s, color 0.2s; 
    transition: background 0.2s, color 0.2s; 
} 
.hi-icon-effect-1a .hi-icon:hover { 
    background: #FFF; 
    color: #41AB6B; 
} 

Answer 2

원은 border-radius: 50%을 사용하여 렌더링되며 아이콘 이미지는 벡터 아트 워크를 단일 파일에 포함시키는 "아이콘 글꼴"의 문자입니다. 아이콘 글꼴 파일은 http://tympanus.net/Development/IconHoverEffects/fonts/ecoicons/ecoicon.woff

입니다. 모든 주요 웹 브라우저에있는 F12 도구를 사용하여 웹 사이트를 검사 할 수 있습니다.