Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"

Программирование, разработка, тестирование

→

Html & CSS

→

Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"

Посмотрели 3912 раз(а)

Пример смотрим, тестируем

Файл example.html

Html

<html>
<head>
     
     <meta charset="utf-8">
     <title>Example</title>

     
     <style>
          .hero-block
          {
               z-index: 20;
               opacity: 0;
               position: absolute;
               top: 235px;
               left: 394px;
               animation: animation-path-hero-block 20s linear infinite;
          }

          .hero {
               display: block;
               width: 40px;
               height: 40px;
               background-image: url(./images/hero.png);
               background-position: left 0;
               animation: animation-path-hero 1s steps(12) infinite;
          }

          @keyframes animation-path-hero-block {
               0%{opacity:0;transform:translateZ(0)}
               5%{opacity:1}
               95%{opacity:1}
               to{opacity:0;transform:translate3D(360px,180px,0)}
          }

          @keyframes animation-path-hero{
               0%{background-position:0 top}
               to{background-position:-480px top}
          }
     </style>
</head>

<body>

     
     <div style='width:1300px; height:800px; background-color:#D0E0D0'>

          
          <img src='./images/background.jpg' width='1200px'>

          
          <div class="hero-block">
               <div class="hero"></div>
          </div>
     </div>

</body>

</html>

Картинка hero.png

Картинка background.jpg

Как запустить локально (у себя на компьютере)?

1) Создайте у себя файл example.html

2) Скачайте картинки hero.png и hero.png
Сохраните картинки внутри папки images

3) Запустите example.html у себя на компьютере в Goggle Chrome

← Предыдущая тема
Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"

Следующая тема →
Рисуем картинку с движением. Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval