Как реализовать псевдослучайные в CSS?

JavaScript CSS

Сегодня я прочитал «Секрет CSS» и узнал интересную информацию: как добиться псевдослучайности?

Это и весело, и вдохновляюще — эта запись.

Задайте вам вопрос, что это случайно?

Мы можем подумать с противоположной стороны и сначала ответить на то, что не случайно.

Неслучайный означает, что существуют определенные правила, которым необходимо следовать. Например, цвета на следующем рисунке появляются регулярно:

Из рисунка видно, что три цвета красный, зеленый и синий повторяются в целом каждые шесть раз.

Изображение выше — это скриншот, который я реализовал с помощью CSS. Посмотрите внимательнее на исходный код здесь:

div:nth-child(n){
  background: red;
}
div:nth-child(2n+1){
  background: green;
}
div:nth-child(3n+2){
  background: blue;
}

Поскольку наименьшее общее кратное 1, 2 и 3 равно 6, период закона распределения цветов равен 6.

Здесь мы хотим подчеркнуть, что общее распределение цветов, о котором мы говорим, не учитывает влияние каскадного механизма CSS.

Например следующий код:

div:nth-child(2n){
  background: red;
}
div:nth-child(n){
  background: green;
}
div:nth-child(3n+1){
  background: blue;
}

дает следующее распределение цветов:

Но мы все же можем сказать, что он имеет период 6, хотя он здесь особенный, минимальный период 3.

принцип

Как сделать распределение цветов менее регулярным?

Это не очень регулярно, это просто случайное понятие.

Другими словами, ты смотришь на изображение, но полвторого не найдешь, так что тут закон.

Если вы ограничиваете только эти три цвета (эта предпосылка очень важна), выполнимый способ — увеличить наименьшее общее кратное, например, 35.

Потому что в настоящее время у нас всего 24 элемента div. Если общий период повторения равен 35, то эффект от этих 24 цветов должен быть очень случайным. Конечно, это просто «нравится», так что это псевдослучайно.

Делители 35 равны 5, 7. где 5 и 7 — простые числа.

Простое число является хорошим выбором, потому что оно является целым числом, кратным простому числу, например, 5n и 7n в пределах 35, в основном без конфликтов.

При этом коллизий между 5n+a и 7n+b будет как можно меньше. Более того, если и a, и b тоже простые, конфликтов будет меньше. Например, 5n+3 и 7n+5 сталкиваются только на 33.

Например, это распределение цветов:

Его код:

div:nth-child(n){
  background: red;
}
div:nth-child(5n+1){
  background: green;
}
div:nth-child(7n+4)
{
  background: blue;
}

Конечно, в приведенном выше эффекте цвет по умолчанию слишком красный. Основная причина в том, что мы применяем его только один раз за цветовой цикл. Здесь вы можете увеличить частоту соответственно:

div:nth-child(n){
  background: red;
}
div:nth-child(5n+1),
div:nth-child(5n+4){
  background: green;
}
div:nth-child(7n+4),
div:nth-child(7n+6)
{
  background: blue;
}

Полученный эффект выглядит следующим образом:

Вышеуказанные эффекты представляют собой случайные схемы, ограниченные 3 цветами.

Если разрешено добавлять другие цвета, мы можем добавить сюда другие простые множители.

заявление

Существуют ли другие приложения этого псевдослучайного числа?

В «CSS Secret» есть два примера.

1. Псевдослучайный фон

Полосы можно получить с помощью линейных градиентов в css, например:

background: repeating-linear-gradient(90deg, 
  red, red 15px, 
  green 0, green 30px, 
  blue 0, blue 45px);

Эффект:

Также можно использовать несколько фонов:

background:
  linear-gradient(90deg, red 15px, transparent 0),
  linear-gradient(90deg, green 30px, transparent 0),
  linear-gradient(90deg, blue 45px, transparent 0);
background-size: 45px 100%;

Затем мы делаем цвета случайными и устанавливаем размер фона в основную версию:

background-size: 41px 100%, 61px 100%, 83px 100%;

Эффект следующий, где цвет фона по умолчанию белый.

Цвет также может быть дополнительно обеспечен шириной:

background:
  linear-gradient(90deg, red 11px, transparent 0),
  linear-gradient(90deg, green 23px, transparent 0),
  linear-gradient(90deg, blue 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;

Пожалуйста, ознакомьтесь с конкретнымонлайн-пример.

2 комбинации анимации

Мы знаем, что свойство animation, как и свойство background, также поддерживает несколько наборов значений.

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

Например:

animation: 1s spin, .7s radius, 1.1s color, 1.3s width;

Пожалуйста, ознакомьтесь с конкретнымонлайн-пример.

Принцип цикады

Этот метод увеличения случайности с помощью простых чисел называется в книге принципом цикады.

Baidu немного, Чжан Xinxu также представил:«Принцип цикады» и CSS3 Случайные многофоновые случайные закругленные углы и другие эффекты.

Вообще говоря, причина, по которой его называют принципом «цикады», заключается в том, что жизненный цикл (в основном цикл вспышки) чужих цикад составляет 13 или 17 лет. Период большой и простой. Таким образом, можно максимально избежать цикла его естественных врагов (если цикл составляет один год, его нельзя избежать?).

Наконец, перечислите другую полезную информацию.

Категории