規模上徘徊了一圈保持邊框的寬度

我有一個圓圈沒有背景，只有邊境，我希望它在大規模的懸停：規模上徘徊了一圈保持邊框的寬度

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <link type="text/css" rel="stylesheet" href="css/main.css" /> 
    <style> 
    #circle{ 
     border: 1px solid black; 
     width: 40px; 
     height: 40px; 
     border-radius: 50%; 
     margin: 20% auto; 
     transition: all 0.5s ease; 
    } 
    #circle:hover{ 
     cursor: pointer; 
     transform: scale(6); 
     border: 1px solid black; 
     transition: all 0.5s ease; 
    } 
    </style> 
</head> 
<body> 
    <div id="circle"> 
    </div> 
</body> 
</html>

這裏是一個小提琴：https://jsfiddle.net/u36nfxs0/2/

正如你所看到的，問題在於邊界的寬度也是一樣的。有沒有辦法縮放保持邊框寬度的圓？

謝謝！

來源

2017-09-22 Nikita

不要使用變換，調整這一翻譯的尺寸（寬度，高度，和明確的邊距：

#circle { 
 
    border: 1px solid black; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 50%; 
 
    margin: 20% auto 0 auto; 
 
    transition: all 5s ease; 
 
} 
 

 
#circle:hover { 
 
    cursor: pointer; 
 
    width: 240px; 
 
    height: 240px; 
 
    margin-top: calc(20% - 100px); 
 
}

<div id="circle"> 
 
</div>

來源

2017-09-24 18:38:41 vals

規模上徘徊了一圈保持邊框的寬度

回答

相關問題