• Страница 1 из 1
  • 1
Форум » Веб-разработка » Структура кода HTML » Вращающийся глобус с помощью SVG и CSS (Вращающийся земной шар при помощи стиля SVG и CSS)
Вращающийся глобус с помощью SVG и CSS
Kosten
Дата: Воскресенье, 2020-04-05, 19:19 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26255
Награды: 61


Оригинальная подборка красивых эффектов на CSS/SVG, которые заключаются во вращение глобусов в разном дизайне. Что можно подобрать тот стиль, который подойдет под дизайн сайта. Ведь много тематических направлений, и здесь анимационный глобус отлично подойдет под путешествии, что на сайте просто шикарно будет смотреться. Изначально уже была тема Эффект вращения земного шара на CSS, где эта идет как дополнение.



HTML

Код
  <div class="container">
  <!----0--->
<div class="globe__placeholder">
<div class="globe__container">
<div class="globe">
<div class="globe__sphere"></div>
<div class="globe__outer_shadow"></div>
<div class="globe__reflections__bottom"></div>
<div class="globe__worldmap">
<div class="globe__worldmap__back"></div>
<div class="globe__worldmap__front"></div>
</div>
<div class="globe__inner_shadow"></div>
<div class="globe__reflections__top"></div>
</div>
</div>
</div>
  <!-----1---->
<div class="globe__placeholder">
<div class="globe__container">
<div class="globe">
<div class="globe__sphere spehere1"></div>
<div class="globe__outer_shadow"></div>
<div class="globe__reflections__bottom"></div>
<div class="globe__worldmap">
<div class="globe__worldmap__back backimg1"></div>
<div class="globe__worldmap__front backimg1"></div>
</div>
<div class="globe__inner_shadow"></div>
<div class="globe__reflections__top"></div>
</div>
</div>
</div>
  <!------2----->
<div class="globe__placeholder">
<div class="globe__container">
<div class="globe">
<div class="globe__sphere spehere2"></div>
<div class="globe__outer_shadow"></div>
<div class="globe__reflections__bottom"></div>
<div class="globe__worldmap">
<div class="globe__worldmap__back backimg2"></div>
<div class="globe__worldmap__front backimg2"></div>
</div>
<div class="globe__inner_shadow"></div>
<div class="globe__reflections__top"></div>
</div>
</div>
</div>
  <!------3----->
<div class="globe__placeholder">
<div class="globe__container">
<div class="globe">
<div class="globe__sphere spehere3"></div>
<div class="globe__outer_shadow"></div>
<div class="globe__reflections__bottom"></div>
<div class="globe__worldmap">
<div class="globe__worldmap__back backimg3"></div>
<div class="globe__worldmap__front backimg3"></div>
</div>
<div class="globe__inner_shadow"></div>
<div class="globe__reflections__top"></div>
</div>
</div>
</div>
  
   <!------4----->
<div class="globe__placeholder">
<div class="globe__container">
<div class="globe">
<div class="globe__sphere"></div>
<div class="globe__outer_shadow"></div>
<div class="globe__reflections__bottom"></div>
<div class="globe__worldmap">
<div class="globe__worldmap__back backimg4"></div>
<div class="globe__worldmap__front backimg4"></div>
</div>
<div class="globe__inner_shadow"></div>
<div class="globe__reflections__top"></div>
</div>
</div>
</div>
  
   <!------5----->
<div class="globe__placeholder">
<div class="globe__container bg5">
<div class="globe">
<div class="globe__sphere spehere5"></div>
<div class="globe__outer_shadow"></div>
<div class="globe__reflections__bottom"></div>
<div class="globe__worldmap">
<div class="globe__worldmap__back backimg5"></div>
<div class="globe__worldmap__front backimg5"></div>
</div>
<div class="globe__inner_shadow innersha5"></div>
<div class="globe__reflections__top"></div>
</div>
</div>
</div>
  
    <!------6----->
<div class="globe__placeholder">
<div class="globe__container bg5">
<div class="globe">
<div class="globe__sphere spehere6"></div>
<div class="globe__outer_shadow"></div>
<div class="globe__reflections__bottom"></div>
<div class="globe__worldmap">
<div class="globe__worldmap__back backimg6"></div>
<div class="globe__worldmap__front backimg6"></div>
</div>
<div class="globe__inner_shadow innersha5"></div>
<div class="globe__reflections__top"></div>
</div>
</div>
</div>
  
  <!------7----->
<div class="globe__placeholder">
<div class="globe__container">
<div class="globe">
<div class="globe__sphere spehere7"></div>
<div class="globe__outer_shadow"></div>
<div class="globe__reflections__bottom"></div>
<div class="globe__worldmap">
<div class="globe__worldmap__back backimg7"></div>
<div class="globe__worldmap__front backimg7"></div>
</div>
<div class="globe__inner_shadow innersha7"></div>
<div class="globe__reflections__top"></div>
</div>
</div>
</div>
  
   <!------8----->
<div class="globe__placeholder">
<div class="globe__container bg8">
<div class="globe">
<div class="globe__sphere spehere8"></div>
<div class="globe__outer_shadow"></div>
<div class="globe__reflections__bottom"></div>
<div class="globe__worldmap">
<div class="globe__worldmap__back backimg8"></div>
<div class="globe__worldmap__front backimg8"></div>
</div>
<div class="globe__inner_shadow innersha8"></div>
<div class="globe__reflections__top"></div>
</div>
</div>
</div>
  
</div>

CSS



Демонстрация
Прикрепления: 4302621.png(182.2 Kb)
Страна: (RU)
Kosten
Дата: Понедельник, 2020-04-13, 08:41 | Сообщение 2
Оффлайн
Администраторы
Сообщений:26255
Награды: 61


Вращающийся глобус


See the Pen
spinning globe D3 v4
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Понедельник, 2020-04-13, 08:45 | Сообщение 3
Оффлайн
Администраторы
Сообщений:26255
Награды: 61


Оживленная луна вокруг Земли


See the Pen
Animate moon around Earth
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Веб-разработка » Структура кода HTML » Вращающийся глобус с помощью SVG и CSS (Вращающийся земной шар при помощи стиля SVG и CSS)
  • Страница 1 из 1
  • 1
Поиск: