Question

我有一个没有背景但只有边框的圆圈，我想让它在悬停时缩放：

<!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/

正如您所看到的，问题是边框的宽度也会缩放。有没有办法缩放保持边框宽度的圆圈？

谢谢！

Answer 1

不要使用变换，调整整数尺寸（宽度，高度和显式边距：

#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>

在悬停上缩放一个圆圈，保持边框的宽度

1 个答案: