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

Картинки

Объявления
Объявления
Разработка игр | для телефонов на Unity, MonoGame | для браузера Google Chrome на JavaScript, HTML | рисуем графику  
Моя разработка игр на 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  
Яндекс.Метрика