Движение фоновой картинки внутри рамки
Медленно движущаяся картинка в сферической рамке смотрится очень завораживающе. Эта сказочная анимация выглядит дорого, хоть и сделана на чистом 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
