使用纯 CSS（无 javascript）生成随机颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15327990/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Generate random color with pure CSS (no javascript)?
提问by Arch1tect
Is it possible to generate random color with pure CSS and without using javascript? It's probably impossible but I'm still curious.
是否可以使用纯 CSS 而不使用 javascript 生成随机颜色？这可能是不可能的，但我仍然很好奇。
采纳答案by Iwo Kucharski
回答by Zach Saucier
This isn't really possible in pure CSS.
这在纯 CSS 中是不可能的。
However, using a pre-processor like SASS (example) or LESS (example) can generate random colors for you because they are built using scripting languages.
但是，使用像 SASS（示例）或 LESS（示例）这样的预处理器可以为您生成随机颜色，因为它们是使用脚本语言构建的。
One side note that may help readers in the future is the possibility for using CSS variables. We can declare a CSS variable by saying
将来可能对读者有所帮助的一个方面是使用CSS 变量的可能性。我们可以这样声明一个 CSS 变量
element {
--main-bg-color: brown;
}
and use it like so:
并像这样使用它：
element {
background-color: var(--main-bg-color);
}
Now we can change it using JS:
现在我们可以使用 JS 来改变它：
// From http://stackoverflow.com/a/5365036/2065702
var randomColor = "#"+((1<<24)*Math.random()|0).toString(16);
document.documentElement.style.setProperty('main-bg-color', randomColor);
Or you could use a completely different way of selecting a random color (like user input). This allows for possibilities like theming. One thing you have to consider is browser supportbecause it's not great right now.
或者您可以使用完全不同的方式来选择随机颜色（如用户输入）。这允许诸如主题之类的可能性。您必须考虑的一件事是浏览器支持，因为它现在不是很好。
回答by Jono
<body style='background-color:<?php printf( "#%06X\n", mt_rand( 0, 0x222222 )); ?>'>
Using PHP
使用 PHP
回答by Spycomb
according to this site, http://blog.codepen.io/2013/08/26/random-function-in-sass/its possible but not with pure css
根据此站点， http://blog.codepen.io/2013/08/26/random-function-in-sass/可能但不能使用纯 css
回答by Bosco Mabutao
Not really. Dynamism can only be implemented with the support of scripting.
并不真地。只有在脚本的支持下才能实现动态。
回答by DIGmetrics
Not exactly random but with CSS:
不完全随机，但使用 CSS：
Step 1 - Select queried backgrounds, order them in sequence and adjust the frequency
Step 1 - 选择查询背景，按顺序排列并调整频率
@keyframes bgrandom {
0% { background: linear-gradient(90deg, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.96) 0%); }
50% { background: linear-gradient(90deg, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.96) 0%); }
55% { background: linear-gradient(90deg, rgba(255,255,255,0.96) 50%, rgba(255,255,255,0.98) 0%); }
80% { background: linear-gradient(90deg, rgba(255,255,255,0.96) 50%, rgba(255,255,255,0.98) 0%); }
85% { background: linear-gradient(90deg, rgba(255,255,255,0.96) 50%, rgba(255,255,255,0.94) 0%); }
100% { background: linear-gradient(90deg, rgba(255,255,255,0.96) 50%, rgba(255,255,255,0.94) 0%); }
}
Step 2 - Launch the animation(length animationName repeatMode)
第 2 步 - 启动动画（length animationName repeatMode）
#element{ animation: 1.2s bgrandom infinite; }
Easy to use, customize and works great. Similar technique can be used for sliders, spinners, etc.
易于使用、定制并且效果很好。类似的技术可用于滑块、微调器等。
