Vue/CSS生成随机鲜艳复合色并动态显示

Vue生成随机鲜艳复合色

思路就是先生成颜色范围内的数字，计算红蓝绿分量，不足就加，超过就减。记录一下，感觉挺常用的。

        getRandomGradientColor() {
            // getRandomVibrantColor() {
                const min = 0; // 范围的起始值
                const max = 16777215; // 范围的结束值
                const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
                const baseColor = randomNum.toString(16); // 转换为十六进制字符串

                const startColor = this.shadeColor(baseColor, 30); // 在基准颜色上增加30的亮度作为起始颜色
                const innerColor = this.shadeColor(baseColor, 15); // 在基准颜色上增加15的亮度作为中间颜色
                const innerColor_1 = this.shadeColor(baseColor, -15); // 在基准颜色上减少15的亮度作为起始颜色
                const endColor = this.shadeColor(baseColor, -30); // 在基准颜色上减少30的亮度作为结束颜色

                const vibrantColorStart = this.adjustVibrancy(startColor);
                const vibrantColorInner = this.adjustVibrancy(innerColor);
                const vibrantColorInner_1 = this.adjustVibrancy(innerColor_1);
                const vibrantColorEnd = this.adjustVibrancy(endColor);

                const gradientColor = `#${vibrantColorStart}, #${vibrantColorInner},#${vibrantColorInner_1},#${vibrantColorEnd}`; // 设置渐变色为起始颜色和结束颜色

                return `linear-gradient(45deg, ${gradientColor})`;
            },
            adjustVibrancy(color) {
                const num = parseInt(color, 16); // 将十六进制颜色代码转换为数字
                const R = (num >> 16) & 0xFF; // 提取红色分量
                const G = (num >> 8) & 0xFF; // 提取绿色分量
                const B = num & 0xFF; // 提取蓝色分量

                const maxColorComponent = Math.max(R, G, B); // 确定最大的颜色分量值

                const newR = Math.floor((R / maxColorComponent) * 255); // 根据最大颜色分量值调整红色分量
                const newG = Math.floor((G / maxColorComponent) * 255); // 根据最大颜色分量值调整绿色分量
                const newB = Math.floor((B / maxColorComponent) * 255); // 根据最大颜色分量值调整蓝色分量

                const adjustedColorString = (newR << 16 | newG << 8 | newB).toString(16); // 将调整后的颜色分量重新组合为一个新的数字

                return adjustedColorString.padStart(6, '0'); // 将新的颜色数字转换为六位的十六进制字符串，并补全
            },
        shadeColor(color, percent) {
            const num = parseInt(color, 16);// 将十六进制的颜色值转换为十进制数值
            const amt = Math.round(2.55 * percent);// 根据输入的百分比计算灰度值的增量
            const R = (num >> 16) + amt;// 计算新的红色值
            const G = (num >> 8 & 0x00FF) + amt;// 计算新的绿色值
            const B = (num & 0x0000FF) + amt;// 计算新的蓝色值
            // 将新的RGB颜色值转换回十六进制，并返回最终的颜色值
            const newColor = (0x1000000 + (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 + (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 + (B < 255 ? (B < 1 ? 0 : B) : 255)).toString(16);
            return newColor.slice(1);// 返回最终颜色值，去掉十六进制颜色值的前缀#
        }

用法：

<div class="sidebar4-8-items" v-for="(sort, index) in sortInfo" :key="index" :style="{ background: getRandomGradientColor() }"></div>

.sidebar4-8-items{
    padding: 20px;
    margin-top: 40px;
    box-shadow: 0 0 10px lightgray;
    background: linear-gradient(45deg, #b6eeb2, #b6eeb2, #edd4fc, #f3cddb,#b6eeb2);
    background-size: 200% 200%;
    animation: gradientBackground 1s infinite linear;
}
@keyframes gradientBackground {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}