使用 CSS3 和 animate() 缩放圆形图像

Question

我正在尝试为某些图像在悬停时创建缩放功能，同时使用 CSS3 保持圆形图像效果。请参阅下面的代码：

  $(".nodes a").hover(function() {
    if (!$(this).hasClass('inactive')) {
      $(this).css({'z-index' : '99'});
      $(this).find('span').addClass('active');
      $(this).find('span').addClass("hover").stop().animate({ marginTop: '-24px', marginLeft: '-24px', top: '50%', left: '50%', width: '80px', height: '80px', WebkitBorderTopLeftRadius: 40, WebkitBorderTopRightRadius: 40, WebkitBorderBottomLeftRadius: 40, WebkitBorderBottomRightRadius: 40, MozBorderRadius: 40, BorderRadius: 40 }, 250); }
  }, function() {
    if (!$(this).hasClass('inactive')) {
      $(this).css({'z-index' : '0'});
      $(this).find('span').removeClass('active');
      $(this).find('span').removeClass("hover").stop().animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '32px', height: '32px', WebkitBorderTopLeftRadius: 32, WebkitBorderTopRightRadius: 32, WebkitBorderBottomLeftRadius: 32, WebkitBorderBottomRightRadius: 32, MozBorderRadius: 32, BorderRadius: 32 }, 250); }
  });

HTML 看起来像这样 -

<ul class="nodes">
  <li>
    <a href="/">
      <span style="background: url(image.jpg) no-repeat center center; width: 32px; height: 32px;">
        <img src="image.jpg" style="opacity: 0;" />
      </span>
    </a>
  </li>
</ul>

我无法开始工作的是动画时的 MozBorderRadius （它不保持一致的圆，WebkitRadius 和 BorderRadius 似乎可以工作），以及保持图像居中它充满活力。我认为给图像一个 MarginTop 和 marginLeft 为动画时添加到它的宽度和大小的一半就可以了，但它只是将自己与底部对齐。

Answer 1

你不必设置 webkit 半径的所有角，只需“WebkitBorderRadius”就足够了。

对于 MozBorderRadius 的动画，您可以使用 ( "border-radius" : "40px" )。这是在 webkit 和 moz 上运行的代码：

$(".nodes a").hover(function() {
    if (!$(this).hasClass('inactive')) {
        $(this).css({'z-index' : '99'});
        $(this).find('span').addClass('active');
        $(this).find('span').addClass("hover").stop().animate({ 
            marginTop: '-24px', 
            marginLeft: '-24px', 
            top: '50%', 
            left: '50%', 
            width: '80px', 
            height: '80px', 
            'border-radius' : '40px',
            WebkitBorderRadius: 40,
            BorderRadius: 40,
        }, 250);
    }
}, function() {
    if (!$(this).hasClass('inactive')) {
        $(this).css({'z-index' : '0'});
        $(this).find('span').removeClass('active');
        $(this).find('span').removeClass("hover").stop().animate({ 
            marginTop: '0', 
            marginLeft: '0', 
            top: '0', 
            left: '0', 
            width: '32px', 
            height: '32px', 
            'border-radius' : '32px',
            WebkitBorderRadius: 32,
            MozBorderRadius: 32, 
            BorderRadius: 32
        }, 250); 
    }
});