縮放圓潤使用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); 
    } 
});