Создать случайный цвет с чистым CSS (без javascript)?

Можно ли генерировать случайный цвет с помощью чистого CSS и без использования javascript? Это, вероятно, невозможно, но мне все еще интересно.

Ответ 1

Я нашел для вас что-то здесь, но он использует PHP. Я думаю, что это невозможно с помощью простого CSS.

Ответ 2

Это не возможно в чистом CSS.

Однако использование препроцессора, такого как SASS (пример) или LESS (пример), может генерировать для вас случайные цвета, поскольку они созданы с использованием языков сценариев.

Еще одно замечание, которое может помочь читателям в будущем, - это возможность использования 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);

Или вы можете использовать совершенно другой способ выбора случайного цвета (например, пользовательский ввод). Это учитывает возможности как тематика. Одна вещь, которую вы должны учитывать, это поддержка браузера, потому что это не очень хорошо сейчас.

Ответ 3

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

Использование PHP

Ответ 4

Не совсем. Динамизм может быть реализован только при поддержке сценариев.

Ответ 5

согласно этому сайту, http://blog.codepen.io/2013/08/26/random-function-in-sass/ его возможно, но не с чистым css

Ответ 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; }

Легко использовать, настраивать и отлично работает. Подобную технику можно использовать для слайдеров, прядильщиков и т.д.