dir.by  
  Поиск  
Программирование, разработка, тестирование
Разработка игр | для телефонов на Unity, MonoGame | для браузера Google Chrome на JavaScript, HTML | рисуем графику
Моя разработка игр на HTML, Javascript, Typescript
Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
  Посмотрели 3426 раз(а)    
 Анимация человечка на месте. Используем HTML элемент <div>. Используем CSS стили: "animation", "background-image", "background-position", "keyframes" 
последнее обновление: 13 мая 2020
Пример смотрим, тестируем
Файл example.html
  Html  
<html>

<head>
     <!-- заголовок -->
     <meta charset="utf-8">
     <title>Animation hero</title>

     <!-- CSS стили -->
     <style>
          .hero {
               display: block;
               width: 40px;
               height: 40px;
               background-image: url(./images/hero.png);
               background-position: left 0;
               animation: animation-hero 1s steps(12) infinite;
          }

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

<!-- body -->
<body>
     <div class="hero"></div>
</body>

</html>
Картинка hero.png
Как запустить локально (у себя на компьютере)?
Создайте у себя файл example.html
Скачайте картинку hero.png и сохраните внутри папки images
Запустите example.html у себя на компьютере в Goggle Chrome
 
← Предыдущая тема
Пишем игру используя HTML, JavaScript, TypeScript в Visual Studio Code. Я создал несколько ts файлов. Поэтому использую Webpack (собирает все файлы в один js)
 
Следующая тема →
Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

  Объявления  
  Объявления  
 
Моя разработка игр на HTML, Javascript, Typescript
Пишем игру используя HTML, JavaScript, TypeScript в Visual Studio Code. Я создал несколько ts файлов. Поэтому использую Webpack (собирает все файлы в один js)
Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
Моя игра "Wizard World" | HTML, JavaScript
Habr рассказ "Сетевая игра на HTML, CSS и JavaScript" (nodejs, socket.io для сети, HTML canvas для графики, игровые карты в js задаются)
Habr рассказ "Сетевая игра Танки на HTML, JavaScript" (nodejs, socket.io для сети, библиотека PixiJs для графики)
Моя игра "Animal Go". Технологии: C#, MonoGame, Windows, Android, iOS
Моя игра "Animal Go". Как играть. Описание | Игра написана на C# используя MonoGame (запускается на платформах: Windows, Android, iOS)
Как я пишу игру "Animal Go" на компьютере Windows. Компилирую получаю exe файл и запускаю | C#, MonoGame
Как компилировать и запускать игру "Animal Go" на телефоне или в режиме эмулятора Android на компьютере (Windows) | C#, MonoGame
Как компилировать и запускать игру "Animal Go" для системы iOS | C#, MonoGame
Создание графики, анимации для 2D игры
Какую рисовать картинку для 2D игры: растровую картинку png по точкам или векторную картинку svg по линиям?
2D анимация для игры

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика