<MyRusakov.ru />

Создание сайтов на Django

Создание сайтов на Django

Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.

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

Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.

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

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

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

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

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

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

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

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

Анимированный неоновый текст на CSS

Анимированный неоновый текст на CSS

На это уроке мы рассмотрим эффект, когда при движении курсора плавно появляется и исчезает текст.

Создание и стилизация текста

<div class="box">
    ...
    <h2>Neon Text</h2>
</div>

@import url('https://fonts.googleapis.com/css2?family=Monseratt:wght@600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Monseratt', sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
    overflow: hidden;
}
.box{
    position: relative;/*относительное позиционирование*/
    width: 600px;/*ширина контейнера для текста*/
    height: 300px;/*высота контейнера*/
    display: flex;/*отображать как гибкий контейнер*/
    justify-content: center;/*в центре по горизонтали*/
    align-items: center;/*в центре по вертикали*/
}
.box h2{
    color: #fff;/*цвет текста*/
    font-size: 5em;/*размер шрифта*/
    font-weight: 600;/*толщина шрифта*/
    letter-spacing: 0.1em;/*межбуквенное пространство*/
    text-shadow: 0 0 10px #00b3ff,/*неоновый эффект*/
        0 0 20px #00b3ff,
        0 0 40px #00b3ff,
        0 0 80px #00b3ff,
        0 0 120px #00b3ff;
}


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

Создание и стилизация неонового курсора

<div class="box">
    <div class="lightbar"></div>
    ...
    <h2>Neon Text</h2>
</div>

.lightbar{
    position: absolute;/*абсолютное позиционирование */
    top: 0;
    left: 0;
    width: 10px;/*ширина курсора*/
    height: 100%;/*высота курсора*/
    border-radius: 10px;/*закругления*/
    background: #fff;/*цвет курсора*/
    z-index: 2;/*порядок слоя*/
    box-shadow: 0 0 10px #00b3ff,/*неоновый эффект*/
        0 0 20px #00b3ff,
        0 0 40px #00b3ff,
        0 0 80px #00b3ff,
        0 0 120px #00b3ff;
    animation: animatelightbar 5s linear infinite;/*свойства анимации*/
}


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

Анимирование курсора

Курсор плавно появляется и двигается туда-сюда по тексту. Это еще не то, что нам нужно.

@keyframes animatelightbar{
    0%,5%
    {
        transform: scaleY(0) translateX(0);
    }
    10%
    {
        transform: scaleY(1) translateX(0);
    }
    90%
    {
        transform: scaleY(1) translateX(calc(600px - 10px));
    }
    95%,100%
    {
        transform: scaleY(0) translateX(calc(600px - 10px));
    } }


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

Создание верхнего слоя

Теперь верхний слой сверху поверхности текста и курсор двигается по нему.

<div class="box">
    <div class="lightbar"></div>
    <div class="topLayer"></div>
    <h2>Neon Text</h2>
</div>

.topLayer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    animation: animatetopLayer 10s linear infinite;
}


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

Анимация верхнего слоя

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

@keyframes animatetopLayer{
    0%,2.5%
    {
        transform: translateX(0);
    }
    5%
    {
        transform: translateX(0);
    }
    45%
    {
        transform: translateX(100%);
    }
    47.5%,50%
    {
        transform: translateX(100%);
    }
    50.001%,52.5%
    {         transform: translateX(-100%);
    }
    55%
    {
        transform: translateX(-100%);
    }
    95%
    {
        transform: translateX(0%);
    }
    97.5%,100%
    {
        transform: translateX(0%);
    }
}


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

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

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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