3:10
Автор: Рубрика: CSS-рецепты 4 комментария

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

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

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

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

<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">

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

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

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

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

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

4 комментария
  • Руслан

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

    2016-09-30 в 2:36 | Ответить
    • Михаил

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

      2016-10-01 в 8:55 | Ответить
  • Галина

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

    2016-08-14 в 12:16 | Ответить
  • Валерий

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

    2016-08-06 в 9:18 | Ответить