dir.by  
  Search  
Programming, development, testing
Разработка игр | для телефонов на Unity, MonoGame | для браузера Google Chrome на JavaScript, HTML | рисуем графику
Моя разработка игр на HTML, Javascript, Typescript
Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
  Looked at 3699 times    
 Анимация человечка на месте. Используем HTML элемент <div>. Используем CSS стили: "animation", "background-image", "background-position", "keyframes" 
last updated: 13 May 2020
Example we look, we test
Файл 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
 
← Previous topic
Пишем игру используя HTML, JavaScript, TypeScript в Visual Studio Code. Я создал несколько ts файлов. Поэтому использую Webpack (собирает все файлы в один js)
 
Next topic →
Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
 
Your feedback ... Comments ...
   
Your Name
Your comment (www links can only be added by a logged-in user)

  Объявления  
  Объявления  
 
Моя разработка игр на 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"
My Game "Wizard World" | HTML, JavaScript
Habr story [kavichka]Network game in HTML, CSS and JavaScript[kavichka] (nodejs, socket.io for the web, HTML canvas for graphics, game maps in js are set)
Habr story [kavichka]Network game Tanks in HTML, JavaScript[kavichka] (nodejs, socket.io for the web, PixiJs library for graphics)
Моя игра "Animal Go". Технологии: C#, MonoGame, Windows, Android, iOS
My game is "Animal Go". How to play. Description | The game is written in C# using MonoGame (runs on platforms: Windows, Android, iOS)
How do I write a game "Animal Go" on a computer Windows. I compile, get the exe file and run it | C#, MonoGame
How to compile and run the game "Animal Go" on your phone or in emulator mode Android on your computer (Windows) | C#, MonoGame
How to compile and run the game "Animal Go" for the system iOS | C#, MonoGame
Создание графики, анимации для 2D игры
Какую рисовать картинку для 2D игры: растровую картинку png по точкам или векторную картинку svg по линиям?
2D анимация для игры

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