<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

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

Плавный переход. CSS свойство transition

Плавный переход. CSS свойство transition

Значения свойства transition управляют плавной сменой свойств при анимации, наведении и клике на любой элемент. CSS свойство transition нацелено на улучшение взаимодействия с пользователем. Сайты с плавно работающими элементами, оставляют приятное впечатление у пользователя, что в свою очередь повышает доверие к вашему бизнесу.

Свойства transition

  • transition-duration устанавливает интервал времени, в течении которого одно свойство переходит в другое. По сути transition-duration определяет скорость анимации. Дефолтное значение 0 секунд, поэтому переход происходит резко.
  • transition-property указывает на CSS-свойство, к которому будет применяться плавный переход. Допускается указание нескольких свойств через запятую. По умолчанию данное свойство применяется ко всем CSS-свойствам и имеет значение all.
  • transition-delay устанавливает время задержки для плавного перехода в секундах или миллисекундах.
  • transition-timing-function определяет способ, каким образом будет происходить плавный переход. Значение по умолчанию ease (медленное начало, быстрый разгон в середине и медленное затухание в конце). Кроме ease, существует еще пять сценариев плавного перехода:

    ease-in - медленно начинается и плавно ускоряется в конце
    ease-out - стремительно начинается и медленно затухает
    ease-in-out - медленно начинается и медленно заканчивается
    linear - переход сохраняет одинаковую скорость на протяжении всего времени
    steps(int,start|end) - разбивает плавный переход на шаги
.elem {
    transition-duration: 0.5s;
    transition-property: border-radius;
    transition-delay: 1s;
    transition-timing-function: ease in;
}

В реальной верстке макетов, все-таки чаще всего используют укороченную запись.

.elem {
    transition: border-radius 0.5s ease in 1s;
}

Пример перехода цвета

Рассмотрим на примере, как применить CSS-свойство transition в качестве анимационного эффекта при наведении на кнопку.

<div class="button">hover effect</div>
.button {
    color: #fff;
    background-color: #834b7c;
    transition-property: background-color, color;
    transition-duration: 1s, 0.5s;
    transition-delay: 0.1s, 0.2s;
    transition-timing-function: ease, ease-out;
}


.button:hover{
    background-color: #c4a7be;
    color: #4d1d49;
}

Короткая запись свойства transition:


.button {
    transition: background-color 1s ease 0.1s, color 0.5s ease-out 0.2s;
}


Плавный переход по ссылкам

Очень круто смотрится эффект подсвечивания меню навигации при плавном переходе по ссылкам.

<nav>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Services</a>
    <a href="#">Contact Us</a>
</nav>


nav {
    display: flex;
    padding: 15px;
    background-color: #4d1d49;
}

a {
    width: 100px;
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    font: bold 12px Verdana;
    color: #fff;
    background-color: #4d1d49;
    transition-property: color, background-color;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}

a:not(:last-child) {
    margin-right: 15px;
}

a:hover,
a:focus {
    color: #4d1d49;
    background-color: #c4a7be;
}

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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