主页 / 问题 / 982763
Accepted
Dan
Asked:2020-05-18 11:31:53 +0000 UTC2020-05-18 11:31:53 +0000 UTC

这样的七圈是怎么做出来的？

  • 772

请告诉我你怎么能用点做这样一个七个圆圈？

图片

html

2 个回答

  1. Best Answer

    在这里，您可以svg+css根据公式自动确定小圆圈在大圆圈上的位置。

    // cx, cy - центр большого круга
// r - радиус большого круга 
// alpha - угол в полярной системе координат
let x = cx + cos(alpha - PI/2) * r;
let y = cy + sin(alpha - PI/2) * r;

    您可以使用调试器从此处拉出已完成的调试器svg，而不使用页面上的任何脚本。

    在此处输入图像描述

    let r1 = 500, // радиус большого круга
    r2 = 12, // радиус маленьких кругов
    step = 0.08, // шаг между кругами в радианах
    cx = 150, // координаты центра 
    cy = r1 + 40; // большого круга

let icons = ['🍣','🍟','🍩','🍔','🍕','🍦','🍜'];

// функция, добавляющая круг, аргументы - x центра, y центра, радиус, классы стилей
let circle = (x,y,r,c) => `<circle r="${r}" cx="${x}" cy="${y}" class="${c}"></circle>`;

// функция, добавляющая текст, аргументы - x центра, y центра, текст
let text = (x,y,t) => `<text x="${x}" y="${y}">${t}</text>`;

let g = document.querySelector('svg g'); 

// большой круг
g.innerHTML += circle(cx, cy, r1, 'bg');

icons.forEach((e,i) => {
    // тут я наверное слишком намудрил, сдвиг считается таким образом, чтобы расположить
    // первый элемент по центру, а последующие поочередно справа и слева...
    let shift = Math.floor(++i/2)* Math.sign(i%2-0.5)*step;

    // считаем центры малых кругов
    let x = cx + Math.cos(shift - Math.PI/2)*r1;
    let y = cy + Math.sin(shift - Math.PI/2)*r1;

    // малый круг
    g.innerHTML += circle(x, y, r2, 'small');

    // emoji icon вставляется обычным текстом
    g.innerHTML += text(x, y+2, e);
});

// а это небольшой бонус дающий эффект интерактивности
addEventListener('mousemove', e => {
  // вращаем всю группу элементов вокруг центра большого круга
  g.setAttribute('transform', `rotate(${0.5-e.x/innerWidth}, ${cx} ${cy})`)
})
    body {
  overflow: hidden;
  margin: 0;
}
circle {
  transition: 0.2s;
  cursor: pointer;
}
circle:hover {
  stroke-width: 15;
  stroke: rgba(0,0,0,0.1);
}
circle:hover + text{
  font-size: 16px
}
text {
  transition: 0.2s;
  font-size: 14px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.bg {
  fill: none;
  stroke: white;
  pointer-events: none
}
.small {
  fill: white;
  stroke: transparent;
}
    <svg viewbox="0 0 300 100" style="background-color:lightblue" 
     preserveAspectRatio="xMidYMid meet">
  <g></g>
</svg>

    PS：对我来说，这个选项很方便，因为你可以对它进行一些小改动，改变系数，就是这样......

    • 25

  2. 这样的选择，但作为一种选择））

    .menu {
  display: block;
  width: 100%;
  padding-top: 35px;
  font-size: 0;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.menu::after {
  content: '';
  width: 100%;
  height: 200%;
  border-radius: 100%;
  border: 1px solid red;
  position: absolute;
  left: 0; right: 0;
  bottom: -125%;
}

.item {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: green;
  border-radius: 100%;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.item:hover {
  background: blue;
}

.item:not(:last-child) {
  margin-right: calc(100% / 7 - 30px);
}

.item:nth-child(2),
.item:nth-child(6) {
  top: -20px;
}

.item:nth-child(3),
.item:nth-child(5) {
  top: -30px;
}

.item:nth-child(4) {
  top: -35px;
}
    <div class="menu">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

    • 8

相关问题