Question

我正在尝试使用CSS3进行图像抖动on hover但似乎我有语法错误。我正在尝试将效果应用于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***
     }

Answer 2

尝试替换

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

使用此CSS。

.shake:hover {
    -webkit-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

Answer 3

您的问题是.shake正在调用您未在HTML中使用的div。首先，从div类中取出空格，这是错误的命名约定...然后调用那些div而不是“.shake”它会更接近这个

# .img-responsive-shake{
    enter code here
}

用css悬停时摇动图像？

3 个答案: