这在纯CSS中实际上是不可能的.
但是,使用像SASS(示例)或LESS(示例)这样的预处理器可以为您生成随机颜色,因为它们是使用脚本语言构建的.
另一方面可能有助于读者将来使用CSS变量.我们可以通过说声明声明一个CSS变量
element {
--main-bg-color: brown;
}
并像这样使用它:
element {
background-color: var(--main-bg-color);
}
现在我们可以使用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);
或者您可以使用完全不同的方式选择随机颜色(如用户输入).这允许像主题这样的可能性.您必须考虑的一件事是浏览器支持,因为它现在不是很好.
小智 6
不完全随机，但使用 CSS：
步骤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%); }
}
第 2 步 - 启动动画（长度动画名称重复模式）
#element{ animation: 1.2s bgrandom infinite; }
易于使用、定制且效果极佳。类似的技术可用于滑块、旋转器等。
小智 5
<body style='background-color:<?php printf( "#%06X\n", mt_rand( 0, 0x222222 )); ?>'>
使用 PHP