我用什么公式让圆圈总是接触到正确的地方？

Question

在下面的示例中，我创建了我想要实现的目标。

我在圆圈上添加了悬停效果，然后我使用 transform: scale(1.1); 填充大圆圈和侧面圆圈之间的空隙。

当我将圆的大小从 100 像素调整为 200 像素时，这个看起来不错，但我需要让它在任何尺寸下都能正常工作。我只使用了 css，但你可以使用 JS 来获取大小和所有内容。我觉得需要一些三角函数公式，但我不知道如何处理它。

谢谢！

.circles {
  display: flex;
}
.circles__item {
  height: 100px;
  width: 100px;
  background: limegreen;
  border-radius: 50%;
  transform: scale(1);
  transform-origin: top center;
  transition: all 500ms ease-out;
}
.circles__item:hover {
  transform: scale(1.1);
  width: 200px;
  height: 200px;
  background-color: rebeccapurple;
}

<div class="circles">
  <div class="circles__item"></div>
  <div class="circles__item"></div>
  <div class="circles__item"></div>
  <div class="circles__item"></div>
  <div class="circles__item"></div>
</div>

Answer 1

您可以尝试使用 CSS var() & calc() 来设置大小和平均负边距。

.circles {
  display: flex;
  --HW: 100px;/* can be reset on inline-style too */
  --HWhover : calc(var(--HW) * 2 );/*  * 2 doubles the size */
 
  
}
.circles__item {
  height: var(--HW);
  width:var(--HW);
  background: limegreen;
  border-radius: 50%;
  flex-shrink:0;
  transform-origin: top center;
  transition: all 500ms ease-out;
}
.circles__item:hover {
  width: var(--HWhover);
  height: var(--HWhover);
  margin: 0 calc( -0.04 * var( --HWhover) );
  background-color: rebeccapurple;
}

<div class="circles">
  <div class="circles__item"></div>
  <div class="circles__item"></div>
  <div class="circles__item"></div>
  <div class="circles__item"></div>
  <div class="circles__item"></div>
</div>
<div class="circles" style="--HW:150px;">
  <div class="circles__item"></div>
  <div class="circles__item"></div>
  <div class="circles__item"></div>
  <div class="circles__item"></div>
  <div class="circles__item"></div>
</div>
<div class="circles" style="--HW:10vw;">
  <div class="circles__item"></div>
  <div class="circles__item"></div>
  <div class="circles__item"></div>
  <div class="circles__item"></div>
  <div class="circles__item"></div>
</div>

Answer 2

我找到了解决方案 here 并将其应用于我的案例。我不得不使用 JS，因为无法仅使用 css 找到 SQRT。

let circles = document.querySelector('.circles');

let r1 = getComputedStyle(circles).getPropertyValue('--r1');
let r2 = getComputedStyle(circles).getPropertyValue('--r2');

let ab = parseFloat(r1) + parseFloat(r2);
let ad = parseFloat(r1) - parseFloat(r2);;
let bd = Math.sqrt(Math.pow(ab, 2) - Math.pow(ad, 2));
let negMargin = ab - bd;

circles.style.setProperty('--negMargin', `-${negMargin}px`);

.circles {
  --negMargin: 0;
  display: flex;
  flex-flow: row wrap;
  transform-origin: top left;
}

.circles__item {
  background: limegreen;
  border-radius: 50%;
  transform-origin: top center;
  transition: all .3s ease-in-out;
  margin: 0 0;
  height: calc(var(--r2) * 2px);
  width: calc(var(--r2) * 2px);
}

.circles__item:hover {
  height: calc(var(--r1) * 2px);
  width: calc(var(--r1) * 2px);
  margin-right: var(--negMargin);
  margin-left: var(--negMargin);
}

.circles__item:hover:last-child {
  margin-right: 0;
}

.circles__item:hover:first-child {
  margin-left: 0;
}

<div class="circles" style="--r1:180; --r2:80;">
  <div class="circles__item"></div>
  <div class="circles__item"></div>
  <div class="circles__item"></div>
  <div class="circles__item"></div>
</div>

我用什么公式让圆圈总是接触到正确的地方？

What formula do I use to get the circles always touch on the right place?

javascript

css

trigonometry

sass