
<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
Всё течёт, все изменяется. Когда я с Серым движусь, в конце движения у меня круги перед глазами. Видать, старею.
ОтветитьУдалитьСемён, не без того. За день так накручусь, не то что круги, башка кругом
ОтветитьУдалитьПривет, Вика. Интересно. Придумать бы, где применить.
ОтветитьУдалитьЛюба, необычно, правда. Сделаешь если дай знать, пожалуйста. Мне нравятся твои идеи.
ОтветитьУдалитьНе работает
ОтветитьУдалитьhttps://windwin10.blogspot.com/
Возможно, изображение слишком большое. Дай е ссылку на картинку. Когда тестировалп, не все корректно работают.
Удалитьочень интересный эффект.А возможно ли сделать,чтобы несколько картинок в этом кругу сменяли друг друга?
ОтветитьУдалитьНет несколько ни как. Тут происходит поворот 162.5%; и процесс начинается заново.
Удалитьпоняла,ну всё равно прикольно
ОтветитьУдалитьСогласна, красиво и необычно.
ОтветитьУдалить