<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

Помимо самих уроков Вы так же получаете и множество упражнений. По сути, Вы создадите свои собственные 20 небольших проектов, благодаря чему у Вас появится и практика, и портфолио.

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

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

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

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

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

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

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

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

Анимированный блик у кнопки на чистом CSS

Анимированный блик у кнопки на чистом CSS

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


Позиция кнопки на экране

Как всегда начнем с создания контейнера, куда и поместим нашу кнопку. Обратите внимание, что я не использую тег button, а сразу прописываю ссылку с классом button. Дабы избежать лишнего кода (кнопка + ссылка) в HTML разметке.

<div class="container">
    <a href="#" class="button">Button</a>
</div>

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

.container {
    width: 100%; /* ширина на всю ширину браузера */
    height: 100vh; /* на всю высоту первого экрана */
    display: flex; /* делаем контейнер гибким */
    justify-content: center; /* по центру по горизонтали */
    align-items: center; /* вертикальное центрирование */
}


Анимированный блик на кнопке на чистом CSS.

Создание кнопки

Теперь с помощью CSS стилей создадим саму кнопку. Для разметки кнопки мы использовали строчный элемент a и чтобы иметь возможность применять к кнопке блочные CSS свойства (отступы, рамки), отобразим кнопку как строчно-блочный элемент.

button{
    display: inline-block;/* отображать как строчно-блочный элемент*/
    text-decoration: none;/* убираем дефолтное подчеркивание у ссылки*/
    font-family: 'Roboto Condensed';/*название шрифта*/
    text-transform: uppercase;/*трансформация в заглавные буквы */
    font-weight: 900;/*толщина шрифта*/
    color: #fff;/*цвет текста на кнопке*/
    font-size: 30px;/*размер шрифта*/
    background-color: darkred;/* цвет кнопки */
    padding: 20px 60px;/* расстояние от текста до края кнопки */
    position: relative;/* относительное позиционирование */
    border-radius: 10px;/* радиус скругления углов*/
    overflow: hidden;/* спрятать все лишнее за пределами кнопки*/
}


Анимированный блик на кнопке на чистом CSS.

CSS оформление блика

Для создания блика не нужно создавать новый элемент, а воспользуемся псевдоэлементом before. Наложим сверху полупрозрачную псевдокнопку с шириной на одну треть меньше оригинальной кнопки.

button:before {
    content: ""; /* отображает псевдоэлемент */
    position: absolute; /* абсолютное позиционирование */
    top: 0; /* верхняя координата */
    left: 0; /* левая координата */
    width: 2em; /* относительная ширина */
    height: 100%; /* высота как у оригинала */
    background-color: rgba(255, 255, 255, 0.3); /* белый цвет с полупрозрачностью */
}


Анимированный блик на кнопке на чистом CSS.

Блик создан и теперь его нужно повернуть по диагонали. За это отвечает свойства: transform: skew. Повернем блик на -45 градусов.

transform: translateX(-0.5em) skewX(-45deg);

Анимированный блик на кнопке на чистом CSS.

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

transform: translateX(-4em) skewX(-45deg);

Анимация блика

Анимация создается при помощи ключевого слова @keyframes. Придумаем название для анимации, пусть это будет moveLight. Для движения блика по кнопке из одной точки в другую (from...to), достаточно создать два кадра с разными значениями у translateX. И последнее, осталось повесить созданную анимацию на псевдоэлемент before с указанием скорости анимации. Чем меньше число, тем быстрее будет мелькать блик. При наведении на кнопку, блик проскользит по всей длине кнопки.

.button:hover:before {
    animation: moveLight 0.5s;
}

@keyframes moveLight {
from {
    transform: translateX(-4em) skewX(-45deg);
}
to {
    transform: translateX(10em) skewX(-45deg);
}
}

Посмотрите пример на CodePen

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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