Question

我有一个带背景图片的div。怎么做：当你悬停在该div上时，背景图像向上移动5px然后向下移动5个像素？例如快速上升和减速。

我的代码：

CSS

<style>
.place {
background:url(../img/place.png) no-repeat 6px 50%;
}
</style>

HTML

 <div class="place">
    123 Something Street<br/>
    UB5 212 Liverpool
    </div>

过渡如何做到这一点？还是jquery？

Answer 1

使用CSS3

.place {
    background:url(http://lorempixel.com/20/20/) no-repeat;
}

div.place:hover {
    animation:myanim 0.5s;
    -webkit-animation:myanim 0.5s;
    /* Safari and Chrome */
}

@keyframes myanim {
    0% {
        background-position:0 0;
    }
    50% {
        background-position:20px 0;
    }
    100% {
        background-position:0 0;
    }
}

@-webkit-keyframes myanim
/* Safari and Chrome */
 {
    0% {
        background-position:0 0;
    }
    50% {
        background-position:20px 0;
    }
    100% {
        background-position:0 0;
    }
}

Answer 2

将.animate()用于background-position属性：

    $('div.place').on('hover', function() {
      $(this).animate({
         'background-position-y': '15px'
      }, 500, 'linear');
   });

Answer 3

你也可以试试CSS3：

   transition: background-position 1s ease;
   -moz-transition: background-position 1s ease; /* Firefox */
   -webkit-transition: background-position 1s ease; /* Safari and Chrome */

Answer 4

你需要添加的background-position样式到你的div背景并做一些小jQuery的东西：

添加到css：

background-position：10px 10px;
并准备好jQuery：


$（ '地方'）。悬停（函数（）{           $（'。place'）。css（'background-position'，'10px 5px'）;           的setTimeout（函数（）{               $（'。place'）。css（'background-position'，'10px 10px'）;
          }，2000）;       }）;

Here is the working example

上下移动背景图像

4 个答案: