html - 从中心展开绝对定位的圆

Question

我有一个绝对定位的 div，它代表一个通过更圆的边界的圆。当 div 发生悬停事件时，我需要扩展这个圆圈，问题是圆圈向右/底部方向扩展，我需要它从中心扩展。这种偏离当然发生是因为顶部/左侧参数具有固定值，我设法使用负顶部/左侧边距克服了这个问题。最后一个问题是我想添加从正常状态到扩展状态的平滑过渡，这会产生不好的结果。 HTML代码:

<div class="circle"></div>

CSS 代码:

.circle {

  position: absolute;
  left: 150px;
  top: 150px;
  border: 5px solid #000;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  -webkit-transition: width 0.5s, height 0.5s;
  -moz-transition: width 0.5s, height 0.5s;
  -o-transition: width 0.5s, height 0.5s;
  transition: width 0.5s, height 0.5s;
}
.circle:hover
{
  width: 60px;
  height: 60px;
   margin-left: -30px;
  margin-top: -30px;
}

工作示例:https://jsfiddle.net/ArturoO/4qLr0tc2/5/

如果您删除过渡规则，那么它会起作用，但我需要动画出现。有什么想法吗？

Answer 1

使用平移变换代替边距

.circle {
  position: absolute;
  left: 150px;
  top: 150px;
  border: 5px solid #000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}
.circle:hover {
  width: 60px;
  height: 60px;
}

<div class="circle"></div>