如何使用 CSS 和 JavaScript 将图标排列成圆圈？-css教程-PHP中文网

如何使用 CSS 和 JavaScript 将图标排列成圆圈？

Patricia Arquette

发布： 2024-12-24 08:04:10

原创

528 人浏览过

How to Arrange Icons in a Circle Using CSS and JavaScript?

使用 CSS 和 JavaScript 将图标放置到圆圈中

概述

实现将多个图像放置在圆圈中的所需效果需要 CSS 和 JavaScript。

用于定位的 CSS

要将图像定位在一个圆圈中，CSS变换是必要的。每个图像应放置在包含元素的中心，然后沿 X 轴平移容器宽度的一半。以下代码演示了所需的 CSS：

.container {
  width: 24em;
  height: 24em;
  position: relative;
}

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

登录后复制

用于分布的 JavaScript

CSS 定位图像时，JavaScript 用于将它们均匀分布在圆圈周围。这涉及计算每个图像之间的角度并相应地旋转它。下面的代码演示了这一点：

const container = document.querySelector('.container');
const icons = document.querySelectorAll('.icon');

const containerWidth = container.getBoundingClientRect().width;
const containerHeight = container.getBoundingClientRect().height;
const iconWidth = icons[0].getBoundingClientRect().width;
const iconHeight = icons[0].getBoundingClientRect().height;

icons.forEach((icon, index) => {
  const angle = (Math.PI * 2) / icons.length;
  const transformString = `rotate(${angle * index}rad) translate(${containerWidth / 2 - iconWidth / 2}px, ${containerHeight / 2 - iconHeight / 2}px)`;
  icon.style.transform = transformString;
});

登录后复制