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

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».

Источник