对Click的影响

Question

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

Answer 1

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>

Answer 2

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