Анимация логотипа

#html #css #css3 #html5 #вёрстка

Заказчик хочет сделать анимированный логотип, хочет добавить эффект движения.

Рассматривает 2 варианта:

1) Запустить крутиться планету — тогда нужно искать для нее полную модель глобуса
и чтобы она начинала крутиться с такого ракурса материков, как сейчас изображено на
лого. Таким образом планета будет крутиться, а буквы "Мир принадлежит тебе" будут стоять
на месте. Крутиться в левую сторону — тогда создается эффект, что дирижабль летит вокруг
земного шара.

2) Если планету запустить не получится, тогда нужно запустить надпись "Мир принадлежит
тебе", тоже с прокруткой в левую сторону вокруг планеты.

Скажите, насколько реально сделать эти два варианта с помощью CSS, или для этого
нужно использовать другие какие-то технологии/программы?
    

Ответы

Ответ 1

Вот Вам планетка на svg+d3.js, при желании сюда не трудно добавить интерактивность



const s = 600;
const svg = d3.select('svg');
const projection = d3.geoOrthographic().translate([s / 2, s / 2]);
const path = d3.geoPath().projection(projection);
const url = 'https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json';

fetch(url).then(r => r.json()).then(d => {
    svg.selectAll("path.country")
      .data(topojson.feature(d, d.objects.countries).features)
      .enter()
      .append("path")
      .classed("country", true)
      .style("stroke", "#888")
      .style("fill", (d, i) => '#e3edb8');
})

requestAnimationFrame(draw)

function draw(t) {
  projection.rotate([0.01 * t]);
  svg.selectAll("path.country").attr("d", path);
  requestAnimationFrame(draw)
};
body, svg {
  overflow: hidden;
  margin: 0;
  width: 100vw;
  height: 100vh;
}





Ответ 2

Заставить крутиться планету можно без всяких JS и гифок. Ищете изображения, собираете
в одно, делаете анимацию путем сдвига частей изображения внутри блока (например, меняете
background-position).
Заставить крутиться текст можно с помощью CSS-трансформаций. transform3d и анимация
вам в помощь.