Вращающийся земной шар

Из готовых вариантов оформления шара имеется:

  • 7 вариантов оформления сферы
  • 3 варианта ее тени
  • 9 вариантов мировой карты

Пример:

HTML:

CSS:

Размер шара задается свойством: transform: scale() в классе .globe-container

SVG спрайты:

Варианты:

Варианты сферы:
Варианты тени сферы:
Варианты мировой карты:
CSS сферы:

Оригинальный вариант

CSS тени сферы:

Оригинальный вариант

CSS мировой карты:

Оригинальный вариант

Кроме этого, можно использовать различные цвета и градиенты в CSS свойствах и SVG спрайтах

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!