css3로 이미지 효과 누르기

하이브리드 모바일 앱에서 아이콘이 여러 개 있고 아이콘을 클릭 할 때 프레스 효과를 재현하고 싶습니다.css3로 이미지 효과 누르기

HTML :

<div class="menuIcon" id="menuIcon"> 
     <img src="img/menu.svg" /> 
</div>

CSS :

.menuIcon { 
    width: 32px; 
    height: 32px; 
    position: absolute; 
    left: 20px; 
    top: 28px; 
} 

.menuIcon img { 
    width: 19px; 
    height: 19px; 
    position: absolute; 
    margin: auto; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

내가 재현하려는 기자 효과가 트위터 응용 프로그램에 볼 수 있습니다 : 당신은 여기를 볼 수 있습니다 https://vid.me/gub5

출처

2016-12-13 wawanopoulos

:active를 사용하여. 스택 오버플로는 코드 작성 서비스가 아닙니다. 나는 당신이 [** 추가 연구 **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) Google을 통해 또는 SO를 검색하여 시도하고 시도하십시오. 문제가 계속되면 ** 코드 **로 돌아와서 시도한 내용을 설명하십시오. –

링크가 작동하지 않음 – pradeep1991singh

당신은 th 이 같은에서, transform: scale 및

.menuIcon { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: absolute; 
 
    left: 20px; 
 
    top: 28px; 
 
} 
 
.menuIcon img { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
.menuIcon img:active { 
 
    transform: scale(0.8); 
 
}

<div class="menuIcon" id="menuIcon"> 
 
     <img src="http://placehold.it/100" /> 
 
</div>

당신이 적어도 시도 자신이 코딩 할 것으로 예상된다

출처

2016-12-13 16:22:14 LGSon

답변

관련 문제