Движение фоновой картинки внутри рамки

Движение фоновой картинки внутри рамки

Движение фоновой картинки внутри рамки

Медленно движущаяся картинка в сферической рамке смотрится очень завораживающе. Эта сказочная анимация выглядит дорого, хоть и сделана на чистом CSS.

HTML разметка


<div class="planet planetEarth">
    <div class="container">
        <div class="earth"></div>
    </div>
</div>

CSS код

Создадим космический фон для планеты.


* {
    margin: 0;/*обнуление отступов*/
    padding: 0;/*обнуление полей*/
    box-sizing: border-box;/* ширина элемента без учета рамок, полей*/
}
body{
    display: flex;/*подключение flexbox*/
    justify-content: center;/*горизонтальное выравнивание*/
    align-items: center;/*вертикальное выравнивание*/
    min-height: 100vh;/*на всю высоту экрана*/
    overflow: hidden;/*спрятать переполнение*/
}
.planetEarth{
    position: relative;/*относительное позиционирование*/
    min-width: 60%;/*минимальная ширина фона*/
    height: 100vh;/*на всю высоту экрана*/
    display: flex;/*flexbox контейнер*/
    justify-content: center; /*горизонтальное выравнивание*/
    align-items: center;/*вертикальное выравнивание*/
    background: #182357;/*цвет фона*/
}

Движение фоновой картинки внутри рамки

Изобразим планету «Земля».


.earth{
    position: absolute;/*абсолютное позиционирование*/
    width: 340px;/*ширина сферической окружности*/
    height: 340px;/*высота сферической окружности*/
    background: #f00;/*цвет размытого фона вокруг планеты*/
    border-radius: 50%;/*закругление углов у блока*/
    background: url(planet.jpg);/*картинка планеты*/
    background-size: cover;/*пропорционально растянутая фоновая картинка*/
    animation: earth 20s linear infinite;/*имя, продолжительность, характер и непрерывность анимации*/
    box-shadow: inset 0 0 20px #03A9F4,/*размытая рамка с помощью теней*/
        0 0 120px #03A9F4;
}
.planet .container{
    width: 100%;/*обнуление отступов*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    -webkit-box-reflect: below 1px linear-gradient(#0001,#0002);/*зеркальное отражение элемента*/
}

Движение фоновой картинки внутри рамки

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


@keyframes earth
{
    0%/*первый кадр*/
    {
        background-position: 0;
    }
    100%/*последний кадр*/
    {
        background-position: 162%;
    }
}

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

Источник