缩放圆润使用CSS3和动画（）

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> 

我不能去工作时，动画（不保持洽圈，WebkitRadius和BorderRadius是MozBorderRadius似乎工作虽然），以及保持图像居中动画。我想给图像的宽度和动画会怎么做时，添加到它的尺寸的一半量的MarginTop和marginLeft，但它只是赞同底部。

Answer 1

您没有设置的WebKit半径的每一个角落，只是“WebkitBorderRadius”是不够的。

而对于动画MozBorderRadius，可以使用（“边界半径”：“40像素”）。这里是你的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); 
    } 
});