<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Делаем спиннер на HTML-CSS

Делаем спиннер на HTML-CSS

Один из самых базовых элементов интерфейса любого современного сайта - это спиннер - анимированный элемент, который крутится вокруг некоторой точки, тем самым сообщая пользователю о том, что его запрос выполняется и данные загружаются.

В примере далее я покажу Вам максимально упрощенный вариант такого элемента.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Spinner</title>

    <style>


        html, body {
            height: 100%;
        }

        /* выравниваем все блоки по ценру экрана */
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }


        /* элементы спиннера также выравниваем по центру */
        .spinner {
            text-align: center;
        }


        /*  элемент спиннера - делаем круг из квадрата 40x40
            с помощью свойства border-radius, левая граница круга окрашена
            в другой цвет. далее запускаем бесконечную анимацию
        */
        .spinner__animation {
            display: inline-block;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            border-top: 3px solid rgba(0, 0, 0, 0.1);
            border-right: 3px solid rgba(0, 0, 0, 0.1);
            border-bottom: 3px solid rgba(0, 0, 0, 0.1);
            border-left: 3px solid rgb(129, 138, 145);
            animation: loading-spinner 0.5s infinite linear;
        }

        /* это текст для спиннера, например - "Загрузка..." */
        .spinner__info {
            display: block;
            padding-top: 5px;
            color: rgb(129, 138, 145);
            font-size: .9rem;
        }

        /* сама анимация вращения */
        @keyframes loading-spinner {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

    </style>

</head>
<body>

    <div class="spinner">
        <span class="spinner__animation"></span>
        <span class="spinner__info">Загрузка...</span>
    </div>

</body>
</html>

Таким образом, мы получили простой компонент спиннера, который можно подстраивать непосредственно под дизайн конкретного сайта, изменяя цвет или размер. При желании можно также изменить и скорость анимации. Все это можно сделать в единственном классе - .spinner__animation.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.