如何用HTML插入标签云组件_HTML CSS3变换与随机颜色生成算法

  JavaScript
  CSS
  HTML
  React
  Node.js
  Vue
  TypeScript
  Webpack

.tag-cloud {
  text-align: center;
  padding: 20px;
}
.tag-cloud a {
display: inline-block;
margin: 8px;
padding: 8px 12px;
border-radius: 20px;
text-decoration: none;
font-family: Arial, sans-serif;
transition: transform 0.3s ease, box-shadow 0.3s;
/ 随机旋转角度将在JS中设置 /
}
.tag-cloud a:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

function getRandomColor() {
  const hue = Math.floor(Math.random() * 360); // 色相 0-360
  const saturation = '60%'; // 饱和度
  const lightness = '60%';  // 亮度
  return `hsl(${hue}, ${saturation}, ${lightness})`;
}
document.querySelectorAll('.tag-cloud a').forEach(tag => {
tag.style.backgroundColor = getRandomColor();
tag.style.color = 'white';
// 添加随机旋转
const rotateAngle = (Math.random() - 0.5) * 20; // -10 到 +10 度
tag.style.transform = rotate(${rotateAngle}deg);
});

// 示例：给某些标签加 data-weight 属性
// JavaScript
const tags = document.querySelectorAll('.tag-cloud a');
tags.forEach(tag => {
const weight = tag.getAttribute('data-weight') || 1;
tag.style.fontSize = ${1 + (weight * 0.3)}em;
tag.style.fontWeight = weight > 2 ? 'bold' : 'normal';
});