Question

body {
  background: darkblue
}

#planetone {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 460px;
  left: 45%;
  margin: -20px;
  font-size: 100px;
  animation: myOrbit 10s infinite linear;
  color: white;
}

@keyframes myOrbit {
  0% {
    -webkit-transform: rotate(0deg) translateX(5px) translateY(170px) rotate(0deg) scale(1);
  }
  25% {
    -webkit-transform: rotate(90deg) translateX(5px) translateY(170px) rotate(-90deg) scale(.75);
  }
  50% {
    -webkit-transform: rotate(180deg) translateX(5px) translateY(170px) rotate(-180deg) scale(.60);
  }
  75% {
    -webkit-transform: rotate(270deg) translateX(5px) translateY(270px) rotate(-270deg) scale(.75);
  }
  100% {
    -webkit-transform: rotate(360deg) translateX(5px) translateY(170px) rotate(-360deg) scale(1);
  }
}

<div id="planetone"><img width='100px' src="http://dots.com.ge/dev/wp-content/uploads/2015/06/WEBArtboard-1.png" />
  <h6 style='color:white;margin-top:-55px;'>Social Media</h6>
</div>

<img style='display:inline-block;transform:translateY(-85px) !important;margin-top:150px;transform:scale(1.2)' src='http://dots.com.ge/dev/wp-content/uploads/2015/06/ასტყროlines.png'>

我需要在椭圆形路径中为对象设置动画。

http://dots.com.ge/development/

在第三部分，你可以看到小行星在大的一个周围旋转，我希望它在第一个轨道上完全旋转，然后再添加8个，我无法弄清楚确切的动词代码。

我正在使用这个动画代码：

  @keyframes rotAroundOrbit {

       0%  { -webkit-transform: rotate(0deg) translateX(5px) translateY(170px) rotate(0deg) scale(1); }

       25% { -webkit-transform: rotate(90deg) translateX(5px) translateY(170px) rotate(-90deg) scale(.75); }

       50%  { -webkit-transform: rotate(180deg) translateX(5px) translateY(170px) rotate(-180deg) scale(.60); }

       75%  { -webkit-transform: rotate(270deg) translateX(5px) translateY(270px) rotate(-270deg) scale(.75); }

       100%  { -webkit-transform: rotate(360deg) translateX(5px) translateY(170px) rotate(-360deg) scale(1); }

}

它很接近，但没有按照我希望的方式进行。

用css创建椭圆动画

0 个答案: