Каждый раз когда мы нажимаем на одну из игральных карт, нам будет выпадать новая: иногда король червей, иногда пиковый туз, иногда бубновая девятка — в общем, любая карта из стандартной колоды.
При этом у CSS нет ни «random» функций, ни её Math.random() эквивалента, ни способов генерации случайных чисел или цветов.
Так что же тут происходит?
Элементы в CSS не могут вести себя рандомно, поскольку попросту не существует random-функции. Но мы можем создать иллюзию случайности, используя анимацию.
Игральные карты из примера выше очень быстро меняются, и когда мы нажимаем на одну из карт, анимация останавливается, а карта переворачивается.
Анимация настолько быстрая, что она становится источником случайности: карты в примере меняются 52 раза за 1 секунду.
В основе нашей анимации лежит эксперимент в квантовой физике, известный как Кот Шредингера. Элементы находятся в обоих состояниях одновременно, и только через взаимодействие можно заставить их принять одно из двух этих состояний.
Именно такой прием тут и используется: анимация настолько быстрая, что пользователь не видит отдельных карт и может остановить их постоянное изменение только с помощью нажатия.
Этот трюк особенно хорош, когда у нас есть возможность замаскировать механизм его работы. Если так спрятать анимацию, то пользователю даже не придет в голову попробовать просчитать скорость изменений.
Ну и это в принципе практически невозможно сделать, поскольку анимация очень быстрая.
Выводы
У этого необычного способа рандома есть несколько преимуществ. Например, если у нас нет доступа к JavaScript, мы можем обойтись без него, ограничившись только CSS. К тому же это довольно неочевидный прием, поэтому ни коллеги, ни пользователи не смогут сходу его раскусить.
Надеемся, что вам было интересно. Мы считаем, что это отличный пример того, как в CSS можно по полной применять свою креативность!
Читайте также:
- Супергеройский макет: комбинируем CSS-сетки и CSS-фигуры
- Как увеличить производительность CSS-in-JS в 175 раз
- Точки останова CSS в Material UI
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи Adir SL: Creating randomness with pure CSS.
