Красивый эффект движения картинки в круге

Доброго времени суток, дорогие читатели и гости блога. Предлагаю вам попробовать просто завораживающую анимацию движения изображения в сфере от которой  не отвести глаз. И вся эта красота создаётся на  чистом CSS.

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

<div class="planet planetEarth">
  <div class="container">
    <div class="earth"></div>
  </div>
</div>
<style>
.planetEarth{
position: relative;
min-width: 60%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #182357;
}
.earth{
position: absolute;
width: 300px;
height: 300px;
background: #f00;
border-radius: 50%;
background: url(https://i1.wallbox.ru/wallpapers/main/201551/e74a8ffac9938d4.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);
}
@keyframes earth
{
0%
{
    background-position: 0;
}
100%
{
    background-position: 162.5%;
}
}
</style>

Хочу добавить пояснительный текст к некоторым настройкам

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);- зеркальное отражение 

Конечно, в качестве более наглядного примера выбрана планета. Можно привести любое изображение. Попробуйте, чтобы долго не искать хотя бы эту ссылку на картинку вставить.

https://i.ytimg.com/vi/JX7giiYkHno/maxresdefault.jpg

Играть с этим можно сколько угодно. Думаю, многие найдут применение такому эффекту движения картинки в сфере. У меня просьба, если сделаете свой вариант, дайте знать пожалуйста, уж очень посмотреть хочется. 

автор эффкета porsake на CodePen

на CodePen