Анимация вокруг своей оси

160

06 июня 2019, 10:00

Кто имеет опыт создания анимаций по типу, как на главной странице сайта SimilarWeb?!
Задача в создании анимации, которая вращается по своей оси!

Скрин:

Визуальное решение задачи увидите на тестовой версии сайта.
Спасибо @Геннадий Журов и @Alexandr_TT!

Answer 1

Используйте свойство transform-origin. Координаты точки трансформации считаются от верхнего левого угла элемента. Вращаем вокруг центра солнца.

*{ 
  box-sizing:border-box; 
} 
.solar-system{ 
  background-color:#002; 
  width:500px; 
  height:200px; 
  position:relative; 
} 
.sun{ 
  width:50px; 
  height:50px; 
  border-radius:50%; 
  background-color:yellow; 
  box-shadow:0 0 20px 2px yellow; 
  position:absolute; 
  top:calc(50% - 25px); 
  left:calc(50% - 25px); 
} 
.mercury-orbit{ 
  width:130px; 
  height:130px; 
  border-radius:50%; 
  border:1px solid rgba(255,255,255,.4); 
  position:absolute; 
  top:calc(50% - 65px); 
  left:calc(50% - 65px); 
} 
.mercury{ 
  border-radius:50%; 
  position:absolute; 
  width:10px; 
  height:10px; 
  background-color:gray; 
  top:calc(50% - 5px); 
  left:calc(50% - 70px); 
  transform-origin:70px 5px; 
  animation:4s mercury infinite linear; 
} 
@keyframes mercury{ 
  from{ 
    transform:rotate(0) 
  } 
  to{ 
    transform:rotate(360deg) 
  } 
}

<div class="solar-system"> 
  <div class="sun"></div> 
  <div class="mercury-orbit"></div> 
  <div class="mercury"></div> 
</div>

Answer 2

svg + css

Спорить, что лучше CSS или SVG абсолютно не конструктивно.
Это относится не к конкретному топику, а к тенденции запросов на выполнение той или иной задачи. Вроде этого,- "Cделайте мне только на CSS или только на SVG"

Нужно использовать и то и другое. Обе эти спецификации имеют достаточное проникновение друг в друга и прекрасно работают совместно.

Многих пугают очень длинные строки SVG формул, поэтому попытаюсь их сделать в стиле CSS.

Взял в качестве основы хороший ответ @Геннадия Журова и попытался сделать микс CSS+SVG

.solar-system { 
  background-color: #002; 
  width: 50%; 
  height: 50%; 
} 
 
.sun { 
  fill: yellow; 
  filter: url(#dropShadow); 
} 
 
.mercury-orbit { 
  stroke: rgba(255, 255, 255, .4); 
  stroke-width: 1; 
  fill: none; 
} 
 
.mercury { 
  fill: crimson; 
  filter: url(#dropShadow2); 
}

<div class="solar-system"> 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 400">  
   
  <defs> 
    <filter  
      id="dropShadow"	 
      x="-20%" y="-20%"  
      width="150%" height="150%"> 
      <feGaussianBlur stdDeviation="5" /> 
    </filter> 
    <filter  
      id="dropShadow2"  
      x="-20%" y="-20%"  
      width="120%" height="120%"> 
      <feGaussianBlur stdDeviation="2" /> 
    </filter> 
  </defs> 
   
  <circle class="sun" cx="250" cy="175" r="25" />  
  <g> 
    <animateTransform  
      attributeName="transform"  
      type="rotate"  
      values="0 250 175;360 250 175"  
      dur="12s" 
      repeatCount="indefinite" /> 
    <circle class="mercury-orbit" cx="250" cy="175" r="65" /> 
    <circle class="mercury" cx="185" cy="175" r="6" /> 
  </g> 
   
</div>