CSS怎样实现数据标签云—随机大小颜色方案

<div id="tag-cloud-container">
    <a href="#javascript">JavaScript</a>
    <a href="#css">CSS技巧</a>
    <a href="#html">HTML5</a>
    <a href="#frontend">前端开发</a>
    <a href="#react">React.js</a>
    <a href="#vue">Vue.js</a>
    <a href="#nodejs">Node.js</a>
    <a href="#web-design">网页设计</a>
    <a href="#performance">性能优化</a>
    <a href="#security">网络安全</a>
    <a href="#data-viz">数据可视化</a>
</div>

#tag-cloud-container {
    display: flex;
    flex-wrap: wrap; /* 允许标签换行 */
    gap: 12px; /* 标签之间的间距 */
    justify-content: center; /* 居中对齐 */
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    max-width: 800px;
    margin: 30px auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

#tag-cloud-container a {
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 500;
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 添加过渡效果 */
    display: inline-block; /* 确保transform生效 */
}

#tag-cloud-container a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('tag-cloud-container');
    if (!container) return; // 确保容器存在

    const tags = container.querySelectorAll('a');

    // 定义字体大小范围 (像素)
    const minFontSize = 14;
    const maxFontSize = 28;

    // 定义一个颜色调色板，或者你可以生成完全随机的颜色
    const colors = [
        '#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6',
        '#1abc9c', '#d35400', '#c0392b', '#2980b9', '#8e44ad',
        '#27ae60', '#f1c40f', '#e67e22', '#c0392b'
    ];

    tags.forEach(tag => {
        // 生成随机字体大小
        const randomSize = Math.floor(Math.random() * (maxFontSize - minFontSize + 1)) + minFontSize;
        tag.style.fontSize = `${randomSize}px`;

        // 从预定义颜色中随机选择一个
        const randomColorIndex = Math.floor(Math.random() * colors.length);
        const selectedColor = colors[randomColorIndex];
        tag.style.color = selectedColor;

        // 为了让标签看起来更丰满，可以给背景一个半透明的同色调
        // 这里只是简单地在颜色后面加上 '1A' 表示透明度，适用于HEX颜色
        tag.style.backgroundColor = selectedColor + '1A';
        // 或者使用RGBA，更灵活
        // const r = parseInt(selectedColor.slice(1, 3), 16);
        // const g = parseInt(selectedColor.slice(3, 5), 16);
        // const b = parseInt(selectedColor.slice(5, 7), 16);
        // tag.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.1)`;
    });
});

// 如果你想生成完全随机的十六进制颜色，可以用这个函数：
/*
function getRandomHexColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
// 在forEach循环里，就可以这样用：tag.style.color = getRandomHexColor();
*/