<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

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

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

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

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

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

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

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

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

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

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

Анимированная кнопка на чистом CSS

Анимированная кнопка на чистом CSS

Ни в коем случае нельзя бездумно создавать на сайте анимации, просто ради анимации. Как говорится, медицинский совет "не навреди", здесь вполне уместен. В каком случае существование анимированной кнопки, пойдет сайту на пользу? Пожалуй, только в одном, когда надо привлечь внимание пользователя.

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

Суть анимации - вращаются три кольца замысловатой формы, с разной скоростью и в противоположных направлениях. При наведении мыши кольца перестают вращаться, а рамки заполняются фоновым цветом.

Анимированная кнопка на чистом CSS.

HTML разметка

Создадим квадрат с пустыми блоками и ссылкой button внутри.

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

CSS код

Тег body будет служить флекс-контейнером для квадрата. Следующий код поставит будущую кнопку в центре браузера.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}

Создадим блок с квадратом, который будет служить лишь основой для колец и поэтому останется невидимым. Квадрат одновременно служит как флекс-контейнером для ссылки button, так и флекс-элементом у body. В нашем примере с анимированной кнопкой, флекс-технология используется для выравнивания элементов по центру.

.square {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

В HTML разметке, мы заготовили три пустых блока, каждый из которых и будет кольцом. Добавлять стили каждому кольцу, мы будем через псевдокласс nth-child.

Первое кольцо

Главная фишка колец в том, что у них своеобразная форма, которой можно легко добиться с помощью онлайн-генератора fancy-border-radius. Вы формируете нужную форму и копируете готовый код.

.square div:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition: 0.8s;
    animation: animate 6s linear infinite;
}

Hover эффект убирает рамку и заполняет кольцо фоном.

.square:hover div:nth-child(1) {
    border: none;
    background: rgba(255,255,255);
}

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

.square div:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #7ef9ff;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition: 0.8s;
    animation: animate2 4s linear infinite;
}

.square:hover div:nth-child(2) {
    border: none;
    background: rgba(126,249,255);
}

.square div:nth-child(3) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #ff66cc;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition: 0.8s;
    animation: animate 10s linear infinite;
}

.square:hover div:nth-child(3) {
    border: none;
    background: rgba(255,102,204);
}

Анимация @keyframes

Анимация состоит из двух ключевых кадров:

  • 0% - первый кадр
  • 100% - последний кадр

Первая анимация заставит одно кольцо вращаться против часовой стрелки, а два других по часовой стрелке.

@keyframes animate {
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}

@keyframes animate2
{
    0%
    {
        transform: rotate(360deg);
    }
    100%
    {
        transform: rotate(0deg);
    }
}

Стилизуем ссылку внутри кнопки.

.button a {
    position: relative;
    display: inline-block;
    margin-top: 4px;
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    font-size: 30px;
    font-family: 'Indie Flower', sans-serif;
}

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

vs259hm vs259hm 27.11.2019 18:54:49

Спасибо. Очень эффектно!

Ответить

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