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;
}

我想要重现的新闻效果在Twitter应用中可见：您可以在此处看到： https://vid.me/gub5

Answer 1

您可以使用transform: scale和:active

解决这个问题

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

用css3按压图像效果

1 个答案: