Эффект нажатия на изображение с 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

Ожидается, что вы по крайней мере попытаться закодировать это для себя. Stack Overflow не является службой записи кода. Я бы предположил, что вы делаете некоторые [** дополнительные исследования **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) , либо через Google, либо путем поиска SO, сделайте попытку и. если у вас все еще есть проблемы, вернитесь ** с кодом ** и объясните, что вы пробовали. –

ссылка не работает – pradeep1991singh

Вы можете решить при этом, как, используя transform: scale и :active

.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

Эффект нажатия на изображение с css3

ответ

Смежные вопросы