使图像从一个点到另一个点的动画？ （附图）

Question

为了更准确一点，我创建了一个描述我的查询的图形：

基本上，我有一个圆形徽标。当用户将鼠标悬停在它上面时，我希望弹出一个人脸的图像，或者更确切地说是向上移动一些动画。这是我用css3完成的事情吗？或许还有另一种方法？

Answer 1

在jquery中是可能的，但是你必须使用矩形图像作为圆形（即在中间有一个孔的正方形）。它的结构有点像这样：

<div id="logoContainer" style="position:relative; overflow:hidden">
  <img src="Box_With_Hole.png" style="position:absolute; left:0px; top:0px;">
  <img src="Man_With_Shiny_Head.png" style="position:absolute; left:0px; top:100%;">
</div>

转换你可以使用JQuery

$("#logoContainer").hover(function(){$(this).stop().animate({
    top: "0%"
  }, 1000);
  $(this).stop().animate({
    top: "100%"
  }, 1000);
});

未经测试

编辑：动画代码可能是我粗略的：P