39

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

4

6 回答 6

12

这在纯 CSS 中是不可能的。

但是，使用像 SASS ( example ) 或 LESS ( example )这样的预处理器可以为您生成随机颜色，因为它们是使用脚本语言构建的。请记住，对于每个用户或访问，此值不是随机的，除非为每个用户或单独访问生成 CSS 文件（这种情况不太常见）。

一方面是使用CSS 变量的可能性。我们可以通过以下方式声明一个 CSS 变量：

html {
  --main-bg-color: brown;
}

并像这样使用它：

html {
  background-color: var(--main-bg-color);
}

现在我们可以使用 JS 来改变它：

// From http://stackoverflow.com/a/5365036/2065702
const randomColor = "#"+((1<<24)*Math.random()|0).toString(16); 

document.documentElement.style.setProperty('--main-bg-color', randomColor);

请注意，您还可以为特定元素创建 CSS 变量，而不仅仅是根文档元素。

或者您可以使用完全不同的方式来选择随机颜色（如用户输入）。这允许像主题化这样的可能性。

于 2016-11-15T20:08:03.487 回答
6

我在这里为你找到了一些东西，但它使用 PHP。我认为使用纯 CSS 是不可能的。

于 2013-03-10T21:45:41.697 回答
6 
<body style='background-color:<?php printf( "#%06X\n", mt_rand( 0, 0x222222 )); ?>'>

使用 PHP

于 2013-12-29T20:22:52.307 回答
4

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

于 2013-03-10T22:09:13.990 回答
4

不完全随机，但使用 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; }

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

于 2018-09-07T14:26:09.493 回答
3

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

于 2014-06-08T06:26:25.203 回答