Пример:
HTML:
1 2 3 4 5 6 7 8 9 10 11 |
<div class="globe-container"> <div class="globe"> <div class="globe-sphere"></div> <div class="globe-outer-shadow"></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> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
.globe-container, .globe { width: 200px; height: 200px; } .globe-container { position: relative; display: inline-block; margin: 30px; transform: scale(1.1); } .globe { position: relative; display: block; margin: 0; padding: 0; top: 0; left: 0; } .globe-worldmap, .globe-worldmap-front, .globe-worldmap-back, .globe-sphere, .globe-outer-shadow, .globe-inner-shadow { position: absolute; display: block; margin: 0; } .globe-sphere, .globe-outer-shadow, .globe-inner-shadow { left: 0; top: 0; width: 200px; height: 200px; background-position: 0 0; background-repeat: no-repeat; } .globe-worldmap { left: 0; top: 0; width: 200px; height: 200px; overflow: hidden; border-radius: 50%; } .globe-worldmap-front, .globe-worldmap-back { left: 0; top: 0; width: 1000px; height: 200px; overflow: visible; background-image: url(worldmap.svg); background-repeat: no-repeat; } .globe-outer-shadow { left: 0; top: 186px; width: 200px; height: 30px; background-image: url(outer_shadow.svg); } .globe-inner-shadow { background-image: url(inner_shadow.svg); } .globe-worldmap-front { background-position: 0px 0px; animation: textureSpinreverse 8s linear infinite; } .globe-worldmap-back { background-position: 0px -220px; animation: textureSpin 8s linear infinite; } @keyframes textureSpin { from { transform: translateX(0); } to { transform: translateX(-47.5%); } } @keyframes textureSpinreverse { from { transform: translateX(-47.5%); } to { transform: translateX(0); } } |
Размер шара задается свойством: transform: scale()
в классе .globe-container
SVG спрайты:
- Карта: worldmap.svg
- Тень под сферой: outer_shadow.svg
- Тень внутри сферы: inner_shadow.svg
Варианты:
Варианты сферы:
Варианты тени сферы:
Варианты мировой карты:
CSS сферы:
Оригинальный вариант
CSS тени сферы:
Оригинальный вариант
CSS мировой карты:
Оригинальный вариант
Кроме этого, можно использовать различные цвета и градиенты в CSS свойствах и SVG спрайтах
Большое спасибо за отличную работу
Здравствуйте!
Установил файлы svg
Поставил HTML код
Прописал CSS
Но отображается только один шар, без картинки и анимации!
Что делаю не так???
Круто, очень круто)
Автор, спасибо Вам огромное за этот проект, искала нечто подобное несколько дней, и уже не надеялась найти, как вдруг..)
Может быть, подскажите, как поменять размер шара? Пока удалось поменять цвет, что уже невероятно радует.
И еще вопрос: как сделать то же самое, но с другим изображением, и не в формате svg, как правильно пропорции картинок рассчитать?
С Новым годом!)
Размер можно задать точками в нужных пропорциях (исходя из рамера 200х200px), но проще сделать через transform: scale()
Размер svg карты 1000х410px, а как рассчитать для другой, так сложно сказать, например, тут используется сразу 2 карты в 1 картинке, тыльная и передняя.
Александр, спасибо большое, попробую поэкспериментировать))
Добрый день! Никак не получается вставить шар на сайт, не очень сильна в программировании, может что делаю не так((( Вставляю на один из конструкторов сайтов, по HTML коду (имеет след. вид: <div>...</div>). Подскажите, в каком виде я должна вставить ваш HTML и CSS ?
Констукторы - это зло!
Попоробую помочь, напишите в ВК лучше (думаю тут одой фразо не полечить)
Написала на почту
Доброго времени суток. Сделал. Получилось. Но глобус установил выше хеадера. Хочу спросить- как настроить глобус таким образом чтобы он не сдвигал хеадер сайта а стоял рядом с ним.
Добрый день.
А можно ссылку? Я же не вижу кода, в котором мог бы что то поправить...
http://moyko-sasha.koledg-pdatu.km.ua/
Я понимаю что в индекс пшп нужно поставить в правильное место, и тут проблемы нет... но все мои извращения не привели к тому чтобы установить глобус поверх хеадера... он сдвигает вниз, под себя хеадер 🙁
Как вариант заменить в классе .globe-container
position: relative;на position: absolute;Если нужно как то иначе, напишите в ВК, там удобнее все обсудить
попробую. ок,если что напишу в ВК.