点击效果答案

【问题标题】：Effect on Click点击效果
【发布时间】：2018-04-24 00:06:51
【问题描述】：

我有一张图片，每次点击它都会增加你的分数。我想让它更有趣，这样当你点击它时图像会稍微缩小，当你放开点击时，它会再次放大到正常大小。我将如何做这个动画/效果。（使用 CSS）

【问题讨论】：

Can I have an onclick effect in CSS?的可能重复
在 SO 上，您应该尝试自己编写代码。在 doing more research 之后，如果您有问题，您可以发布您尝试过的内容，并清楚地解释什么不起作用并提供Minimal, Complete, and Verifiable example。 SO 不是代码编写服务。

【解决方案1】：

parentDiv:hover > img{
  padding: 15px;
}

【讨论】：

【解决方案2】：

CSS3 transitions 是最好的方法：在这个例子中是一个 div，用 img 试试。

使用多个声明来确保与所有浏览器的兼容性。



 div {
  width: 100px;
  height: 100px;
  background: green;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

div:active {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
 <div>
 </div>

【讨论】：