html - 用 css 在悬停时摇动图像？

Question

我正在尝试使用 CSS3 使图像在 悬停时 发生抖动，但似乎存在语法错误。我正在尝试将效果应用于 css3.png 和 html5.png我已将 id 类添加到我希望具有这种效果的图像中。

这是我当前的 html:

<div class="row">
    <div class="col-lg-2 col-lg-offset-2">
        <div id="img">
            <img class="img-responsive shake" src="img/html5.png">
        </div>
    </div>
    <div class="col-lg-3">
        <img class="img-responsive" src="img/and.png">
    </div>
    <div class="col-lg-2">
        <div id="img">
            <img class="img-responsive shake" src="img/css3.png">
        </div>
    </div>
</div>

这是CSS:

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

Answer 1

要获得悬停效果，您必须在您的 css 中包含 :hover 选择器:http://www.w3schools.com/cssref/sel_hover.asp

    .shake img:hover {
      ***code***
     }