CSS. Анимация картинки в зависимости от условий

Всем привет. Хочу сегодня поделиться очень интересными возможностями, которые можно реализовать на чистом css. В частности, как сделать в css анимацию картинки в зависимости от выбора человека. Например, ему нужно с помощью чекбоксов или радиокнопок выбрать какой-то вариант и для каждого варианта нужно проиграть свою анимацию. Сегодня я вам покажу, как можно это сделать достаточно легко за счет css-селекторов.

Знакомимся с примером. Базовая разметка

Итак, я решил, что у меня опять будет пример с футболом. Вот что мы с вами сегодня реализуем. У нас будут два футбольных мяча и ворота. Также мы сделаем две радиокнопки. В зависимости от того, на какую кнопку вы нажмете, будет забит первый или второй мяч. Подойдет такой пример? Тогда начнем.
Вот такая у меня пока разметка:

Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
  1. Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
  2. HostIQ - хостинг премиум качества.
  3. Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
  4. Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!

<div class = "goal"></div>
<div class = "ball"></div>
<div class = "ball2"></div>


Соответственно, это будут ворота и два мяча. Картинки я задам через css фоном:

.ball{
background: url(ball.png) no-repeat;
width: 80px;
height: 80px;
transform: translateY(50px);
}
.ball2{
background: url(ball.png) no-repeat;
width: 80px;
height: 80px;
transform: translate(300px, 10px);
}
.goal{
background: url(vorota.png) no-repeat;
background-size: cover;
width: 400px;
height: 240px;
z-index: -1;
}

С помощью трансформации я немного отодвинул мячи вниз, чтобы наши удары были более амплитудными.
Вот что у нас уже получается:

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

@keyframes ball{
100%{transform: translate(210px, -200px)}
}

Создаем кнопки и реализуем анимацию при нажатии на них

Как я уже сказал, создадим две радиокнопки.

Выберите, какой мяч забить в ворота:<br>
Слева<input type = "radio" name = "ball" id = "radioball">
Справа<input type = "radio" name = "ball" id = "radioball2">

Их нужно поместить в разметке ПЕРЕД нашими воротами и мячами. Это обязательно! Остается применить анимацию при нажатии на любую из кнопок. Это делается с помощью вот таких волшебных селекторов:

#radioball:checked ~ .ball{
animation-name: ball;
animation-duration: 3s;
}
#radioball2:checked ~ .ball2{
animation-name: ball;
animation-duration: 3s;
}

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

Ну что, интересно узнать, как все это дело работает? А вот так:
Посмотреть демонстрацию примера (откроется в новом окне).
Вот такая статья, мало слов, но прием разобрали интересный smile

Понравилась статья? Поделиться с друзьями:
Комментариев: 4
  1. Руслан

    Интересная функция.
    Кстати видел ещё на некоторых сайтах вот такую анимацию: когда наводишь мышкой на картинку, картинка слегка поворачивается по часовой стрелке — это здорово привлекает внимание

    1. Михаил (автор)

      Ну это совсем просто реализуется, за счет стандартных возможностей CSS

  2. Галина

    Забавненько))вот чем хороши последние веяния в css, так это тем, что он стал позволять многое реализовать и в некоторых вещах уже спокойно заменяет js, что является плюсом.

  3. Валерий

    Приветствую, Михаил! Классный материал! С уважением, Валерий Бородин!!!

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: