ЭЛЕКТРОНИКА ИМ 02 на CSS3

Новогодние праздники дали возможность отдохнуть от компа, от работы, уделить больше времени семье… но к концу выходных руки уже зачесались, захотелось чего-нибудь эдакого, чего раньше не делал. Решил поэкспериментировать с CSS3, давно собирался, да как-то ни до того было. Захотелось что-то изобразить в коде без применения графики, выбор пал на игровой девайс школьных лет — электронную игру «Ну, погоди!» (в последствии переименовал в Микки Мауса). Для себя решил, что никакого копипаста делать не буду, всё буду писать сам (за исключением градиентов, тут уж лучше генератором).

В итоге получилось это:

Demo

Наверное нет смысла описывать как и что делал, приводить листинги и т.д., кому станет интересно — заглянет в исходный код. Пришлось повозиться с анимацией, банально много кода вышло. Хотелось еще позаниматься с трансформациями, но их тут впихнуть некуда, в другом эксперименте попрактикуюсь ) Здесь же еще постараюсь уделить время для отрисовки всего экрана: курочки, травка, сам «герой» (кстати, из-за героя то я и переименовл игру из «Ну, погоди!» в «Микки Мауса», мыша будет попроще отрисовать в CSS3). Ну и, если азарт не пропадет, попрактикуюсь в JS и сделаю «играбельной» всю эту штуковину. Девайс накодил исключительно «для себя» с целью прокачаться в CSS3, промежуточным вариантом доволен 🙂

Размещено в CSS.

В этом блоке кнопочки для кликания на случай, если пост оказался полезным :)
  • могут же люди 🙂

    • Elena-sa2005

      могут.

  • Holy shit! Зашел Лисой и завис. Предупреждать надо! 😉 В Хромом — круто.

    • Да, я как-то упустил тот момент, когда фокс стал зависать… надо выявить проблемку, спасибо!

    • Причина в CSS3 baackground, ну или как вариант в кривых руках. Закоментил пока, буду потом разбираться.

  • El mariachi

    Я пару минут ловил эти яйца мышей, потом заподозрил неладное)))))))
    Красиво нарисовал.

  • Мазепа

    Яйца должны катиться а не сползать 🙂 

  • Николай

    отлично!

  • Думал, будет игра, а тут просто верстка. Скука