Question

是否可以使用纯CSS生成随机颜色而不使用javascript？这可能是不可能的，但我仍然很好奇。

Answer 1

我找到了here的东西，但它使用了PHP。我认为使用简单的CSS是不可能的。

Answer 2

在纯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，因为它现在不是很好。

Answer 3

不是真的。动态只能在脚本支持下实现。

Answer 4

<body style='background-color:<?php printf( "#%06X\n", mt_rand( 0, 0x222222 )); ?>'>

使用PHP

Answer 5

根据这个网站， http://blog.codepen.io/2013/08/26/random-function-in-sass/ 它可能但不是纯粹的CSS

Answer 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步-启动动画（长度animationName repeatMode）

    #element{  animation: 1.2s bgrandom infinite; }

易于使用，自定义并且效果很好。类似的技术可以用于滑块，微调器等。

用纯CSS生成随机颜色（没有javascript）？

6 个答案: