Рандомизатор на чистом CSS

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

При этом у CSS нет ни «random» функций, ни её Math.random() эквивалента, ни способов генерации случайных чисел или цветов.

Так что же тут происходит?

Элементы в CSS не могут вести себя рандомно, поскольку попросту не существует random-функции. Но мы можем создать иллюзию случайности, используя анимацию.

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

Анимация настолько быстрая, что она становится источником случайности: карты в примере меняются 52 раза за 1 секунду.

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

Кот Шредингера, на этот раз живой.

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

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

Ну и это в принципе практически невозможно сделать, поскольку анимация очень быстрая.

Выводы

У этого необычного способа рандома есть несколько преимуществ. Например, если у нас нет доступа к JavaScript, мы можем обойтись без него, ограничившись только CSS. К тому же это довольно неочевидный прием, поэтому ни коллеги, ни пользователи не смогут сходу его раскусить.

Надеемся, что вам было интересно. Мы считаем, что это отличный пример того, как в CSS можно по полной применять свою креативность!

Читайте также:

Читайте нас в TelegramVK и Яндекс.Дзен


Перевод статьи Adir SL: Creating randomness with pure CSS.