jquery - 使用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;
}

我想重现的新闻效果在twitter应用程序中可见：您可以在这里看到它：https://vid.me/gub5

最佳答案

您可以使用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>