是否可以使用纯CSS生成随机颜色而不使用javascript?这可能是不可能的,但我仍然很好奇。
我找到了一些here,但它使用PHP。我认为使用简单的CSS是不可能的。
这在纯CSS中实际上是不可能的。
但是,使用像SASS(example)或LESS(example)这样的预处理器可以为您生成随机颜色,因为它们是使用脚本语言构建的。
另一方面可能有助于读者使用CSS variables。我们可以通过说声明声明一个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);
或者您可以使用完全不同的方式选择随机颜色(如用户输入)。这允许像主题这样的可能性。你需要考虑的一件事是browser support,因为它现在不是很好。
并不是的。动态只能在脚本支持下实现。
<body style='background-color:<?php printf( "#%06X\n", mt_rand( 0, 0x222222 )); ?>'>
使用PHP
根据这个网站,http://blog.codepen.io/2013/08/26/random-function-in-sass/它可能但不与纯css
不完全随机但使用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步 - 启动动画(length animationName repeatMode)
#element{ animation: 1.2s bgrandom infinite; }
易于使用,定制和工作。类似的技术可用于滑块,旋转器等。