web-dev-qa-db-ja.com

純粋なCSS（JavaScriptなし）でランダムな色を生成しますか？

JavaScriptを使用せずに、純粋なCSSでランダムな色を生成することは可能ですか？おそらく不可能ですが、私はまだ興味があります。

csscss3randomcolors
26
Arch1tect

私はあなたのために何かを見つけました こちら ですが、PHPを使用しています。単純なCSSでは不可能だと思います。

5
Iwo Kucharski

これは純粋なCSSでは実際には不可能です。

ただし、SASS（ example ）やLESS（ example ）などのプリプロセッサを使用すると、スクリプト言語を使用して構築されるため、ランダムな色を生成できます。

将来の読者に役立つかもしれないサイドノートは、 CSS変数 を使用する可能性です。次のようにして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);

または、ランダムな色を選択するまったく異なる方法を使用することもできます（ユーザー入力など）。これにより、テーマのような可能性が可能になります。考慮しなければならないことの1つは、 ブラウザーサポート です。これは今のところあまり良くないからです。

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

PHPを使用する

4
Jono

あんまり。ダイナミズムは、スクリプトのサポートによってのみ実装できます。

3
Bosco Mabutao

このサイトによると、 http://blog.codepen.io/2013/08/26/random-function-in-sass/ 可能ですが、純粋なCSSではありません

3
Spycomb

完全にランダムではなく、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; }

使いやすく、カスタマイズが可能で、うまく機能します。同様の手法は、スライダー、スピナーなどに使用できます。

2
DIGmetrics