<MyRusakov.ru />

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

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

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

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

Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.

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

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

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

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

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

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

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

Какая тема Вас интересует больше?

Верстаем карточку с эффектом раскрывающейся шторки при наведении на CSS

Верстаем карточку с эффектом раскрывающейся шторки при наведении на 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>CSS Curtain Card</title>

    <style>

        body {
            background: #f2f2f2;
        }

        .container {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            height: 400px;
            width: 600px;
            background: #f2f2f2;
            overflow: hidden;
            border-radius: 20px;
            cursor: pointer;
            box-shadow: 0 0 20px 8px #d0d0d0;
        }

        .content {
            position: absolute;
            top: 50%;
            transform: translatey(-50%);
            text-align: justify;
            color: black;
            padding: 40px;
        }

        h1 {
            font-weight: 900;
            text-align: center;
        }

        h3 {
            font-weight: 300;
        }

        .flap {
            width: 100%;
            height: 100%;
        }

        .flap::before {
            position: absolute;
            content: "";
            height: 100%;
            width: 50%;
            background: url("https://myrusakov.ru/images/articles/javascript-debounce.jpg") white;
            background-position: 100px;
            background-repeat: no-repeat;
            transition: 1s;
        }

        .flap::after {
            position: absolute;
            content: "";
            height: 100%;
            width: 50%;
            right: 0;
            background: url("https://myrusakov.ru/images/articles/javascript-debounce.jpg") white;
            background-position: -200px;
            background-repeat: no-repeat;
            transition: 1s;
        }

        .container:hover .flap::after {
            transform: translatex(300px);
        }

        .container:hover .flap::before {
            transform: translatex(-300px);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="content">
            <h1>Заголовок</h1>
            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem corrupti officia,
                eveniet accusantium distinctio aspernatur. Aliquid, enim non! Maxime enim placeat ut
                hic fugit magni consequatur, quo adipisci id obcaecati?
            </h3>
        </div>
        <div class="flap"></div>
    </div>
</body>

</html>

Таким образом, при наведении указателя на карточку, шторки отодвинутся и будет отображено внутреннее содержимое карточки.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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