ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект вращения земного шара на CSS

Эффект вращения земного шара на CSS

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

Как пример можно взять интернет магазин, и при увиденном шаре, что пользователь или гость может понять, то что торговая точка представлена по всему миру, но это так от себя, все больше зависит от тематического направление, где теперь можно установить такой оригинальный трюк анимации, который создан с помощью CSS и SVG, но и безусловно HTML каркаса.

Так видим на светлом фоне в сером формате:

Вращающийся земной шар на CSS и также SVG

Установка:

HTML

Код

CSS

Код

.zemnoy-shar-vrashchay,
.zemnoy-shar {
  width: 200px;
  height: 200px;
}
.zemnoy-shar-vrashchay {
  position: relative;
  display: inline-block;
  margin: 30px;
  transform: scale(1.1);
}
.zemnoy-shar {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
}
.zemnoy-shar-worldmap,
.krugly-globus-front,
.krugly-globus-back,
.zemnoy-shar-sphere,
.zemnoy-shar-outer-shadow,
.vrashchay-ushchiysya {
  position: absolute;
  display: block;
  margin: 0;
}
.zemnoy-shar-sphere,
.zemnoy-shar-outer-shadow,
.vrashchay-ushchiysya {
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.zemnoy-shar-worldmap {
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}
.krugly-globus-front,
.krugly-globus-back {
  left: 0;
  top: 0;
  width: 1000px;
  height: 200px;
  overflow: visible;
  background-image: url(http://zornet.ru/Abavaga/worldmap.svg);
  background-repeat: no-repeat;
}
.zemnoy-shar-outer-shadow {
  left: 0;
  top: 186px;
  width: 200px;
  height: 30px;
  background-image: url(http://zornet.ru/Abavaga/outer_shadow.svg);
}
.vrashchay-ushchiysya {
  background-image: url(http://zornet.ru/Abavaga/inner_shadow.svg);
}

.krugly-globus-front {
  background-position: 0px 0px;
  animation: textureSpinreverse 8s linear infinite;
}
.krugly-globus-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 - где ставим свои значение, которые соответствуют виденью обзора.

Также можно шар сделать более сером оттенке, где остается поменять в стилях ссылку на основу, где по умолчанию идет прозрачной стиль на CSS вращающуюся земной шар.

Демонстрация
Источник: atuin.ru

15 Марта 2020 Загрузок: 3 Просмотров: 1862 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0