大家好! 我想知道如何使用CSS创建随机RGBA颜色: 我希望随机的css值是这样的:
-webkit-box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9);
我希望随机选择哪种颜色...... enter code here
答案 0 :(得分:0)
您只能使用CSS,但您可以使用javascript。
这是一种方法:
function rainbow(numOfSteps, step) {
// This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
// Adam Cole, 2011-Sept-14
// HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
var r, g, b;
var h = step / numOfSteps;
var i = ~~(h * 6);
var f = h * 6 - i;
var q = 1 - f;
switch(i % 6){
case 0: r = 1; g = f; b = 0; break;
case 1: r = q; g = 1; b = 0; break;
case 2: r = 0; g = 1; b = f; break;
case 3: r = 0; g = q; b = 1; break;
case 4: r = f; g = 0; b = 1; break;
case 5: r = 1; g = 0; b = q; break;
}
var c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
return (c);
}
请注意,上述内容不是我的代码,只是从Random color generator in JavaScript的答案之一中获取。
答案 1 :(得分:0)
不幸的是,不能仅使用CSS来实现。
但是,您可以使用javascript和jQuery以非常简单的方式完成此操作。
var rgbaArray = ['14,162,236,1','0,0,0,0.9'] // the array containing the colors
var randomColor = hexArray[Math.floor(Math.random() * hexArray.length)];
如果变量中有随机颜色,则可以更改元素颜色。
var boxShadowStyle = '0px 3px 0px rgba(' + randomColor + ')' ;
$("#divID").css("box-shadow", boxShadowStyle); // or .className