
Мы регулярно выпускаем такие полезные статьи. Подпишитесь на наш Телеграм-канал, чтобы получать оповещения о новых публикациях.
Задача
Анимировать картинку. На картинке электростанция и нам хочется, чтобы у нас на сайте была анимация, показывающая анатомию конструкции.
Решение
Готовим необходимое количество картинок. С помощью правила @keyframes описываем анимацию блока с картинкой. Механизм простейший: меняем background нашего div, при желании можно нарисовать мультик.
Пример
<html>
<head>
<style type="text/css">
#rasschet-inner{ position:absolute;width:200px;height:245px;top:0px;left:0px;
background:url('http://tepsystem.ru/templates/tepsystem-main/images/rasschet.png') center top no-repeat;
transition:all 150ms ease-in-out 20ms;
-webkit-transition:all 150ms ease-in-out 20ms;
-moz-transition:all 150ms ease-in-out 20ms;
-o-transition:all 150ms ease-in-out 20ms;
-ms-transition:all 150ms ease-in-out 20ms; }
#rasschet-inner {
-webkit-animation-direction:normal;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: movement;
-webkit-animation-duration: 3s;
animation-direction:normal;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: movement;
animation-duration: 3s; }
@-webkit-keyframes movement {
from { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an0.png') center top no-repeat; }
15% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an0.png') center top no-repeat; }
30% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an2.png') center top no-repeat; }
45% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an3.png') center top no-repeat; }
60% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an4.png') center top no-repeat; }
75% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an1.png') center top no-repeat; }
to { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an1.png') center top no-repeat; }
}
@keyframes movement {
from { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an0.png') center top no-repeat; }
15% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an0.png') center top no-repeat; }
30% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an2.png') center top no-repeat; }
45% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an3.png') center top no-repeat; }
60% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an4.png') center top no-repeat; }
75% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an1.png') center top no-repeat; }
to { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an1.png') center top no-repeat; }
}
</style>
</head>
<body>
<div id="rasschet-inner"></div>
</body>
</html>
Результат
]
РАЗВЕРНУТЬ СТАТЬИ ПО ТЕМЕ
- Веб-разработка
«Роскошный» сайт
5640 0 - Веб-разработка
Как прогрессивный сайт без увеличения бюджета решает главную проблему в создании сайта
3265 0 - Веб-разработка
Хостинг для сайта
3001 0 - Веб-разработка
Примеры того, как иллюстрации делают сайты запоминающимися
18461 1