如何使用纯CSS（无需JavaScript）生成随机颜色？

Question

如何使用纯CSS（无需JavaScript）生成随机颜色？

cssrandomcolors

46

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

- Arch1tect

2

做不到。CSS基本上是静态的。 - Bart

https://dev59.com/NXRB5IYBdhLWcg3w4bOv - Blender

3

@Blender 那并不是真正的纯粹CSS。 - Boaz

用一些 JavaScript 吧，这不会有什么问题 :) http://jsbin.com/iyexum/1 - Tomarinator

1

你成功做了什么吗？ - Thomas Ayoub

显示剩余2条评论

4个回答

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%); }
    }

第二步 - 启动动画（长度，动画名称，重复模式）

    #element{  animation: 1.2s bgrandom infinite; }

易于使用、定制并且效果很好。类似的技术也可以用于幻灯片、旋转器等。

- DIGmetrics

6

不完全正确。只有在脚本的支持下才能实现动态性。

- Bosco Mabutao

6

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

使用 PHP

- Jono

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zach Saucier · Accepted Answer

在纯CSS中不太可能实现。

然而，使用像SASS (示例) 或LESS (示例)这样的预处理器可以为您生成随机颜色，因为它们是使用脚本语言构建的。请注意，除非为每个用户或访问单独生成CSS文件（这种情况较少见），否则该值对于每个用户或访问来说都不是随机的。

值得一提的是，还可以使用CSS变量。我们可以通过声明CSS变量来实现：

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

然后像这样使用它：

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

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

// From https://dev59.com/tXM_5IYBdhLWcg3wMgAF#5365036
const randomColor = "#"+((1<<24)*Math.random()|0).toString(16); 

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

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

或者，您可以使用完全不同的方式选择随机颜色（例如用户输入）。这种方法可以实现主题化等可能性。