用纯CSS生成随机颜色(没有javascript)?

问题描述 投票:23回答:6

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

css css3 random colors
6个回答
5
投票

我找到了一些here,但它使用PHP。我认为使用简单的CSS是不可能的。


5
投票

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


3
投票

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


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

使用PHP


3
投票

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


2
投票

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

易于使用,定制和工作。类似的技术可用于滑块,旋转器等。

© www.soinside.com 2019 - 2024. All rights reserved.