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

使用翻译转换而不是边距

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

从中心展开绝对定位圆

1 个答案: