CSSJS打造圆形头像评分布局

想为你的圆形头像或图片添加吸睛的星级评分吗？本文为你揭秘如何利用CSS和JavaScript打造美观且实用的圆形环绕星级评分布局！我们将深入探讨两种主流实现方式：一是巧妙结合CSS `transform`属性与JavaScript动态计算，通过旋转和位移精确定位每个星标；二是采用纯JavaScript结合三角函数，直接计算星标坐标，实现更灵活的定制。文章提供详细代码示例，剖析两种方案的原理、优缺点，助你轻松掌握圆形星级评分的布局技巧，为你的网页设计增添亮点。无论你是前端新手还是经验丰富的开发者，都能从中获益，打造出令人眼前一亮的用户界面！

在现代网页设计中，为圆形用户头像或产品图片添加星级评分是常见的需求。然而，将评分星星以圆形路径环绕在图片周围，而非简单地堆叠在下方，需要一些巧妙的CSS和JavaScript技巧。本教程将深入探讨两种实现此效果的专业方法。

方法一：利用CSS transform与JavaScript动态定位

这种方法结合了CSS的强大转换能力和JavaScript的灵活性，通过计算每个星形图标的旋转角度和位移，将其精确地放置在圆形路径上。

核心原理

1. 容器定位: 创建一个相对定位的父容器，用于包裹圆形图片和星级评分。
2. 星形图标定位: 每个星形图标被放置在一个绝对定位的子容器中。
3. CSS transform: 使用 transform: rotate() translateX() 组合属性。首先，通过 rotate() 将图标容器旋转到其在圆周上的起始角度；然后，通过 translateX() 将其从中心点向外推出到所需的半径位置。
4. 图标自身校正: 由于图标容器被旋转了，图标本身也会跟着旋转。为了让星星始终保持垂直，需要对图标应用一个反向的 rotate() 转换。
5. JavaScript计算: JavaScript负责动态生成星形图标，并根据总数、图标大小和容器半径计算每个图标的精确旋转角度和位移量。

HTML结构

首先，我们需要一个包含头像图片和未来星级评分的容器。为了使用Font Awesome图标，请确保引入其CSS库。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="photo-container">
  <img style="width: 100%;" src="https://i.ibb.co/bmfXcFw/avatar.png" alt="Profile Avatar" />
</div>

CSS样式

定义容器的基本样式，使其成为一个圆形，并为评分图标提供占位符。

.photo-container {
  position: relative; /* 关键：用于绝对定位子元素 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border-radius: 50%; /* 使容器成为圆形 */
  overflow: hidden; /* 隐藏超出容器的图片部分 */
  margin: 20px; /* 示例间距 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.rating-container {
  position: absolute;
  inset: 0; /* 使评分容器覆盖整个父容器 */
}

.rating-container .icons-holder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.icons-holder > div {
  cursor: pointer;
}

.icons-holder > div .icon {
  color: orange; /* 星星颜色 */
}

.icons-holder > div .icon:hover {
  color: darkgoldenrod; /* 悬停效果 */
}

JavaScript逻辑

JavaScript负责计算和生成星形图标，并应用CSS transform。

// 图标数量
const count = 5;
// 图标大小 (px)
const size = 18;
// 图标间距 (px)
const margin = 4;
// 整体旋转角度 (度) - 0度表示从右侧开始
const position = 0; // 例如：55度用于底部，120度用于左侧，240度用于顶部，330度用于右侧

// 获取所有图片容器
const photoContainers = document.querySelectorAll(".photo-container");

photoContainers.forEach((container) => {
  // 获取容器半径
  const r = container.offsetHeight / 2;
  // 计算图标的偏移量，用于调整translateX的精确值
  const offset = (size / Math.PI) * -1;

  const ratingContainer = document.createElement("div");
  ratingContainer.className = "rating-container";
  const iconsHolder = document.createElement("div");
  iconsHolder.className = "icons-holder";

  const posAngles = [];
  for (let i = 0; i < count; i++) {
    // 计算每个图标的旋转角度
    posAngles.push(i * (size + offset + margin));

    const div = document.createElement("div");
    div.style.position = "absolute";
    div.style.display = "block";
    div.style.height = `${size}px`;
    div.style.width = `${size}px`;
    // 应用旋转和位移，将图标放置在圆形路径上
    div.style.transform = `rotate(${posAngles[i]}deg) translateX(${r - size + Math.abs(offset)}px)`;

    const icon = document.createElement("span");
    icon.className = "icon fa fa-star"; // Font Awesome 星星图标
    icon.style.fontSize = `${size}px`;

    // 对图标进行反向旋转，使其保持垂直
    icon.style.transform = `rotate(${posAngles[i] * -1}deg)`;

    div.append(icon);
    iconsHolder.append(div);
  }

  // 应用整体旋转，调整所有图标的起始位置
  iconsHolder.style.transform = `rotate(${position}deg)`;
  ratingContainer.append(iconsHolder);
  container.append(ratingContainer);
});

注意事项

• 半径计算: r - size + Math.abs(offset) 是调整 translateX 距离的关键，它决定了星星距离圆心有多远。需要根据实际图标大小和希望的环绕紧密度进行微调。
• 图标方向: icon.style.transform = rotate(${posAngles[i] * -1}deg) 确保了星形图标在旋转后仍然朝上，这是一个常见的细节处理。
• Font Awesome: 确保已正确引入Font Awesome CSS库，否则图标将无法显示。

方法二：纯JavaScript结合三角函数定位

这种方法不依赖CSS transform 的 translateX，而是直接通过三角函数计算每个图标在圆周上的 x 和 y 坐标，然后使用 left 和 top 属性进行定位。这种方法通常更易于理解和控制每个图标的精确位置。

核心原理

1. 数学基础: 利用圆的参数方程 x = r * cos(theta) 和 y = r * sin(theta) 来计算圆周上点的坐标。其中 r 是半径，theta 是角度（弧度）。
2. 角度转换: 将度数转换为弧度 theta * (Math.PI / 180)。
3. 中心定位: 所有图标的定位都是相对于其父容器的中心点。
4. 可配置选项: 封装成一个函数，允许用户通过参数控制图标数量、大小、间距、起始角度和旋转方向等。

HTML结构

为了展示可配置性，我们创建多个头像容器。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 20px;">
  <div class="avatar" style="width: 300px; height: 300px;">
    <img src="https://i.pravatar.cc/300?random=1" style="height: 100%" alt="Avatar 1" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=2" style="height: 100%" alt="Avatar 2" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=3" style="height: 100%" alt="Avatar 3" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=4" style="height: 100%" alt="Avatar 4" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=5" style="height: 100%" alt="Avatar 5" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=6" style="height: 100%" alt="Avatar 6" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=7" style="height: 100%" alt="Avatar 7" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=8" style="height: 100%" alt="Avatar 8" />
  </div>
  <div class="avatar">
    <img src="https://i.pravatar.cc/300?random=9" style="height: 100%" alt="Avatar 9" />
  </div>
</div>

CSS样式

定义头像容器和评分图标的样式。

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* 确保body至少占据视口高度 */
  margin: 0;
  background: radial-gradient(circle farthest-corner at 10% 20%, rgba(90, 92, 106, 1) 0%, rgba(32, 45, 58, 1) 81.3%);
  font-family: sans-serif;
}

.avatar {
  position: relative; /* 关键：用于绝对定位子元素 */
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0; /* 默认背景色 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.rating-icons {
  color: orange;
  cursor: pointer;
  transition: all 0.3s ease; /* 添加过渡效果 */
}

.rating-icons:hover {
  color: darkgoldenrod;
  transform: scale(1.15) rotate(70deg); /* 悬停动画 */
}

/* 自定义颜色类 */
.red {
  color: red;
}

.red:hover {
  color: darkred;
}

.green {
  color: green;
}

.green:hover {
  color: yellowgreen;
}

JavaScript逻辑

创建一个名为 ratingStars 的函数，它接受一个根元素和可选配置对象作为参数。

function ratingStars(root, options) {
  // 获取元素的半径
  const getRadius = (element) => {
    if (element.offsetHeight === element.offsetWidth) return Math.round(element.offsetWidth / 2);
    else {
      console.error("The given element is not a perfect circle, positioning might be off.");
      return Math.round(element.offsetWidth / 2); // 即使不是圆形也尝试返回一个半径
    }
  };

  // 根据半径、角度计算x,y坐标
  const pos = (r, theta) => {
    return {
      x: Math.round(r * Math.cos(theta * (Math.PI / 180))),
      y: Math.round(r * Math.sin(theta * (Math.PI / 180))),
    };
  };

  // 默认选项
  let op = {
    count: 6, // 星星数量
    icons_class: "rating-icons", // 图标CSS类
    rotate: 0, // 整体旋转角度 (度)
    clock_wise: true, // 是否顺时针排列
    size: 28, // 图标大小 (pt)
    icons_margin: 3.8, // 图标间距 (px)
    edge_margin: 0, // 距离边缘的额外间距 (px)
  };
  // 合并用户自定义选项
  op = { ...op, ...options };

  const radius = getRadius(root); // 获取根元素的半径

  if (radius) {
    // 创建主容器，用于包裹所有图标
    const rating = document.createElement("div");
    rating.style.position = "absolute";
    // 将主容器移动到根元素的中心
    rating.style.left = `${radius - op.size / 2}px`;
    rating.style.top = `${radius - op.size / 2}px`;
    root.append(rating);

    // 根据图标数量和间距生成角度数组
    let degs = [];
    const angleIncrement = op.size / Math.PI + op.icons_margin;
    for (let i = 0; i < op.count; i++) {
      degs.push(Math.round(i * angleIncrement * (op.clock_wise ? 1 : -1)));
    }

    // 遍历角度数组，为每个图标创建并定位
    degs.forEach((deg) => {
      let iconHolder = document.createElement("div");
      iconHolder.style.position = "absolute";
      iconHolder.style.textAlign = "center";
      // 计算图标的定位半径（从中心到图标中心的距离）
      const currentRadius = radius - op.size / 2 - op.edge_margin;
      // 使用pos函数计算x,y坐标，并加上整体旋转角度
      const { x, y } = pos(currentRadius, deg + op.rotate);
      iconHolder.style.left = `${x}px`;
      iconHolder.style.top = `${y}px`;

      // 插入Font Awesome星星图标
      iconHolder.innerHTML = `<span style="font-size: ${op.size * 0.75}pt;" class="${op.icons_class} fa fa-star"></span>`;
      rating.append(iconHolder);
    });
  }
}

// 获取所有头像元素
const avatars = document.querySelectorAll(".avatar");

// 应用不同的配置选项
ratingStars(avatars[0], { count: 5, rotate: 270, edge_margin: 10 }); // 默认配置，但星星在顶部
ratingStars(avatars[1], { icons_class: 'rating-icons red', count: 4, rotate: 100 }); // 红色星星，数量4，旋转100度
ratingStars(avatars[2], { rotate: 143, count: 7, edge_margin: 5 }); // 旋转143度，数量7
ratingStars(avatars[3], { clock_wise: false, count: 6, icons_margin: 10 }); // 逆时针排列，间距更大
ratingStars(avatars[4], { size: 28, count: 5, rotate: 0 }); // 图标更大，从右侧开始
ratingStars(avatars[5], { icons_margin: 20, count: 3, rotate: 180 }); // 图标间距更大，星星在左侧
ratingStars(avatars[6], { edge_margin: 20, count: 8, rotate: 45 }); // 距离边缘更远
ratingStars(avatars[7], { // 综合示例
  count: 4,
  icons_class: 'rating-icons green',
  rotate: 50,
  clock_wise: true,
  size: 30,
  icons_margin: 40,
  edge_margin: 15
});
ratingStars(avatars[8], { count: 15, size: 16, icons_margin: 2 }); // 大量小星星

注意事项

• getRadius 函数: 检查元素是否为正圆形，虽然不是严格必须，但有助于避免非圆形元素导致的不准确布局。
• pos 函数: 这是核心的数学计算部分，将角度转换为笛卡尔坐标。
• op.size / 2 偏移: 在计算 left 和 top 时，需要减去图标自身宽度/高度的一半，以使图标的中心点对齐计算出的 x,y 坐标。
• edge_margin: 这个选项允许你控制星星环绕的紧密程度，使其更靠近或远离头像边缘。
• 可重用性: ratingStars 函数被设计为可重用的工具，通过传递不同的 options 对象，可以轻松地为不同的头像应用不同的评分样式。

总结与选择

两种方法都能实现圆形头像周围的星级评分布局，但各有侧重：

• 方法一 (CSS transform + JavaScript)：

  • 优点: 利用了CSS硬件加速的优势，动画性能可能更好。在某些情况下，CSS的声明式写法可能更直观。
  • 缺点: translateX 的具体值需要通过JavaScript精确计算，且图标自身反向旋转的技巧可能稍显复杂。
  • 适用场景: 当需要高性能的动画或更倾向于利用CSS转换进行布局时。

• 方法二 (纯JavaScript + 三角函数)：

  • 优点: 逻辑更清晰，直接通过数学公式计算 x, y 坐标，易于理解和调试。提供了丰富的配置选项，可重用性强。
  • 缺点: 对于大量元素，JavaScript直接操作 left/top 可能会在理论上略逊于 transform 的性能（但在现代浏览器中差异通常不明显）。
  • 适用场景: 当需要高度可配置、灵活的布局，并且希望通过纯JavaScript来控制所有定位逻辑时。

在实际开发中，推荐使用方法二，因为它将布局逻辑封装在一个易于使用的函数中，提供了丰富的配置选项，使得组件更具通用性和可维护性。无论是哪种方法，都应确保引入Font Awesome等图标库，并根据实际设计需求调整图标大小、颜色和间距。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。