CSS3 Pong: безумные вещи, которые нужно сделать с CSS # 17

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

Очевидно, что разница между игрой и анимацией заключается в интерактивности . Если я не использую JavaScript, мне нужно, чтобы мой CSS взаимодействовал с пользователем. Я перечислил все встроенные «пользовательские события», которые CSS может использовать.

• :hover
• :active
• :visited
• :checked
• :focus
• :enabled
• :disabled
• :selection
• :target

Может быть, мы могли бы каким-то образом совмещать одно из этих событий? Я решил :hover было моим лучшим шансом, поэтому наш курсор станет нашей летучей мышью.

 #court { cursor: url(/bat.gif), text; } 

Далее нам нужен новый элемент, который будет действовать как наш триггер для анимации. Я собираюсь вставить DIV под названием «#targetzone» как раз перед нашей платформой #horizontal. Мы также можем потерять автоматизированного игрока №1.

 <h1>CSS PONG</h1> <div id="court"> <div id="court"> <span id="targetzone"></span> <div id="horizontal"> <span id="ball"></span> <span id="player2"></span> </div> </div> 

 #targetzone { background: rgba(0,0,255,0.25); position: absolute; margin:-50% 0 0 -50%; z-index:100; width:800px; height:600px; } 

CSS-селекторы — « + и « ~ — довольно мощные, но часто упускаются из виду. В этом случае мы можем использовать их для передачи состояния :hover из одного элемента HTML в элемент рядом с ним. Это позволяет нам использовать #targetzone для запуска нашей анимации.

Итак, нам нужно удалить все наши текущие анимации и перенести их в новые правила «запуска при наведении», например:

 #targetzone:hover{ animation: updown 2.3s infinite linear; } #targetzone:hover + #horizontal{ animation: updown 2.3s infinite linear; } #targetzone:hover + #horizontal #player2{ animation: twitchy 1.9s infinite linear; animation-delay:0.95s; } #targetzone:hover + #horizontal #ball{ animation: leftright 1.9s infinite linear; } 

Теперь наша анимация воспроизводится только тогда, когда курсор находится над этой #targetzone — я сделал полупрозрачный синий #targetzone для демонстрации, но обычно он невидим для игрока.

Как это Мы приближаемся.

Теперь давайте подумаем о ЛЮБОЙ реальной игре в теннис.

Самое смешное в теннисе: в большинстве случаев игра НЕ НУЖНА.

Вы не можете поймать, вести мяч или нести мяч. Для 98% каждой точки мяч перемещается (или оживляется) через корт, вне вашей досягаемости или прямого влияния.

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

Итак, если разбить его на шаги, наша теннисная логика может быть записана так:

 @keyframes targetzone { /* ball is in general play - targetzone is big */ 0%, 96% { width: 800px; height: 600px; margin: -50% 0 0 -50%; } /* ball is approaching player 1's baseline - targetzone shrinks*/ 96.1%, 100% { width: 150px; height: 100px; top: 0; left: 0; margin: 10% 0 0 -50px; } } 

 #targetzone:hover { animation: updown 2.3s infinite linear, targetzone 1.9s infinite linear; } 

 @keyframes preparetoserve { /* Give targetzone no height so trigger is hidden */ 0%, 90% { height: 0px; } /* after a short time, resize the targetzone, ready to serve*/ 90.1%, 100% { height: 100px; } } 

 #targetzone { ... animation: preparetoserve 2s 1 linear; }