스팬의 이전 글꼴 크기를 애니메이션하고 스팬 텍스트 위치를 유지합니다.

<span>의 하트 모양 (글꼴 아이콘)이 :before 인 비슷한 버튼이 있습니다. :hover 또는 :active 상태가 활성화되면 :before의 font-size가 증가합니다 (전환이 있음).스팬의 이전 글꼴 크기를 애니메이션하고 스팬 텍스트 위치를 유지합니다.

이제 문제가됩니다. 스팬 텍스트가 위치를 변경합니다. 나는 차라리 같은 장소에 머물러야한다.

정상 상태 :

호버 상태 :

액티브 상태 (클릭)

,451,515,

HTML :

<span class="comment-likes icon-ico-heart">12</span>

SASS :

.comment-likes 
    user-select: none 
    color: #92a3b9 
    cursor: pointer 

    &:before 
    +transition(font 100ms linear, color 100ms linear) 

    &:hover::before 
    font-size: 13px 
    color: lighten($main-color, 15%) 

    &:active::before 
    font-size: 20px 
    color: $main-color 

    &.active 
    color: $main-color 

    &:hover::before 
     color: $main-color

출처

2016-10-26 Alexander

당신은 어떻게 아이콘을 사용합니까 세트? –

@ RokoC.Buljan : SVG는 icomoon이있는 글꼴로 변환됩니다. – Alexander

글꼴 크기를 움직이게하지 말고 'transform-origin'이''50 % 50 % ''인'scale (2) '을 사용하십시오. – Roberrrt

.comment-likes { 
 
    -webkit-user-select: none; 
 
    user-select: none; 
 
    display: inline-block; 
 
    color: hsl(213, 21%, 72%); 
 
    cursor: pointer; 
 
    font: 11px/1 sans-serif; 
 
} 
 

 
.comment-likes:before { 
 
    font: normal normal normal 11px/1 FontAwesome; 
 
    content: "\f004"; 
 
    margin-right: 4px; 
 
    
 
    display:inline-block; /* in order to allow CSS3 transform scale */ 
 
    transition: 0.3s; 
 
} 
 

 
.comment-likes:hover:before { 
 
    transform: scale(1.3); 
 
    color: hsl(213, 51%, 62%); 
 
} 
 

 
.comment-likes:active:before { 
 
    transform: scale(1.5); 
 
    color: hsl(213, 71%, 50%); 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 

 
<span class="comment-likes">12</span>

출처

2016-10-26 09:00:48

스팬의 이전 글꼴 크기를 애니메이션하고 스팬 텍스트 위치를 유지합니다.

답변

관련 문제