<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

CSS анимация падающих звезд

CSS анимация падающих звезд

Для создания анимации падающих звезд нам потребуется картинка зведного неба и сами звезды, созданные средствами HTML и CSS.

HTML-разметка и звездное небо

Вставим в секцию звездное небо. Каждый тег span - это звезда.

<section>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</section>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    overflow: hidden;
}
section{
    position: absolute;/*абсолютное позиционирование*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(bg2.jpg);/*фоновая картинка*/
    background-size: cover;/*растянуть на весь экран сохраняя пропорции*/
    background-position-x: center;/*позиция картинки по горизонтали в центре*/
    animation: animateBg 50s linear infinite;/*свойства анимации*/
}

Для ощущения движения планеты создадим анимацию для звездного неба. Масштабируя фон на втором кадре при помощи свойства scale, создадим эффект вращения планеты.

@keyframes animateBg{
    0%,100%
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.2);
    }
}


CSS анимация падающих звезд.

Стилизация звезд

span{
    position: absolute;
    width: 4px;/*ширина звезды*/
    height: 4px;/*высота звезды*/
    background: #fff;/*цвет звезды*/
    border-radius: 50%;/*закоугление углов*/
    box-shadow: 0 0 0 4px rgba(255,255,255,.1),
        0 0 0 8px rgba(255,255,255,.1),
        0 0 20px rgba(255,255,255,1);
    animation: animate 3s linear infinite;
}

Рисование шлейфа для звезд с помощью псевдоэлемента before.

span:before{
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg,#fff,transparent);
}


CSS анимация падающих звезд.

Анимация падающей звезды.

@keyframes animate{
    0%
    {
        transform: rotate(-45deg) translateX(0);
    }
    70%
    {
        opacity: 1;
    }
    100%
    {
        transform: rotate(-45deg) translateX(-1000px);
        opacity: 0;
    }
}


CSS анимация падающих звезд.

Анимация всех звезд

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

span:nth-child(1){
    top: 0px;/*верхняя координата*/
    right: 0px;/*правая координата*/
    animation-delay: 0;/*задержка анимации*/
    animation-duration: 1s;/*длительность анимации*/
}
span:nth-child(2){
    top: 0px;
    right: 80px;
    animation-delay: 0.2s;
    animation-duration: 3s;
}
span:nth-child(3){
    top: 80px;
    right: 0px;
    animation-delay: 0.4s;
    animation-duration: 2s;
}
span:nth-child(4){
    top: 0px;
    right: 180px;
    animation-delay: 0.6s;
    animation-duration: 1.5s;
}
span:nth-child(5){
    top: 0px;
    right: 400px;
    animation-delay: 0.8s;
    animation-duration: 2.5s;
}
span:nth-child(6){
    top: 0px;
    right: 600px;
    animation-delay: 1s;
    animation-duration: 3s;
}
span:nth-child(7){
    top: 300px;
    right: 0px;
    animation-delay: 1.2s;
    animation-duration: 1.75s;
}
span:nth-child(8){
    top: 0px;
    right: 700px;
    animation-delay: 1.4s;
    animation-duration: 1.25s;
}
span:nth-child(9){
    top: 0px;
    right: 1000px;
    animation-delay: 0.75s;
    animation-duration: 2.25s;
}
span:nth-child(10){
    top: 0px;
    right: 450px;
    animation-delay: 2.75s;
    animation-duration: 2.25s;
}


CSS анимация падающих звезд.

Новички часто спрашивают: C чего начать изучение фронтенда? Я всегда рекомендую идти от простого к сложному и сначала освоить все базовые возможности HTML и CSS, по моему видеокурсу "Верстка сайта с нуля 2.0".

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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