jquery - 使用css3在图像上按下效果

Question

在我的混合移动应用程序中，我有多个图标，我想在点击图标时重现按下效果。

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

Answer 1

你可以这样解决，使用 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>