Какую формулу я использую, чтобы круги всегда касались нужного места? - PullRequest
Новая
       52

Какую формулу я использую, чтобы круги всегда касались нужного места?

2 голосов
/ 19 июня 2020

В приведенном ниже примере я создал то, что пытаюсь достичь.

Я добавил эффект наведения на круги, а затем использовал 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>

Ответы [ 2 ]

2 голосов
/ 19 июня 2020

Я нашел решение здесь и применил его к своему делу. Мне пришлось использовать JS, так как не было возможности найти SQRT только с css. 

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>
1 голос
/ 19 июня 2020

Вы можете попробовать с 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>
...