0

введите сюда описание изображения

Нужно сверстать фон для входа на сайт. Моя реализация в следующем: круги обычные div с position:absolute, но они ширины и высоты блоков заданы в vw и vh соответственно. Вопрос в следующем: как привязать к среднему кругу иконки? Пробовал через абсалютное позиционирование но это очень и очень криво...

1
  • 2
    А почему бы просто не нарисовать этот фон? 12 июл 2018 в 10:10

1 ответ 1

1

Я бы на вашем месте использовал transform

// для автоматизации с помощью jq расположим круги
const randomInteger = (min, max) => {
  let rand = min - 0.5 + Math.random() * (max - min + 1)
  rand = Math.round(rand);
  return rand;
}
const center = document.querySelector('.center');
const divs = center.querySelectorAll('div');
const r = 100; // радиус окружности, на которой будут находится элементы
[...divs].forEach(div => {
  const angle = randomInteger(0, 180);
  // определить в какой четверти находится элемент
  const x = r * Math.cos(angle);
  const y = r * Math.sin(angle);
  
  div.style.transform = `translate(${x}px, ${y}px)`;
});


// маленький бонус
let angle = 0;
setInterval(() => {
  center.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
  angle += 0.5;
}, 16);
.center {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background: #333;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
}

.center div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%);
}

.center div:nth-child(1) {
  background: red;
}
.center div:nth-child(2) {
  background: blue;
}
.center div:nth-child(3) {
  background: yellow;
}
.center div:nth-child(4) {
  background: green;
}
<div class='center'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

3
  • вы все это сами считаете ?я про косинус и синус которые есть у вас в функции?
    – Randall
    12 июл 2018 в 11:10
  • 1
    @Demon__ANT это стандартные функции JS
    – ThisMan
    12 июл 2018 в 11:11
  • да я погуглил . спасибо :)
    – Randall
    12 июл 2018 в 11:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.