Question

我一直在寻找答案，但我能看到的只是在圆形路径中翻译一个物体。在给定半短轴和半长轴的情况下，有没有办法在椭圆路径上平移元素？非常感谢！

css3

Answer 1

看看这个页面，它解释了你应该了解的关于CSS3翻译的所有知识。同样提醒：也可以设置关键帧，用于定义想要animate的样条曲线的边缘点。

解释了

关键帧here。

在您的情况下，它是两个嵌套元素的动画。
＃1 表示要制作动画的图片或元素，您可以轻松定义X转换＃2 ，其中一个作为＃1 的外框，您可以设置Y平移动画。
如果你把它们巧妙地安排在相同的时间尺度上，但不同的容易进出，你可以让你的椭圆发生。

<style>
    .viewport {
        position:relative;
        width:640px;
        height:480px;
        border:1px dashed #000;
    }
    .moveX {
      position:absolute;
      background:#f00;
      height:2px;
      width:480px;
      top:240px;
      left:0px;
      -webkit-animation: mX 5s ease-in-out 0s infinite;
       animation: mX 5s ease-in-out 0s infinite;
    }
    .moveY {
        position:absolute;
        width:480px;
        height:100px; top:-50px;
        border:1px solid #333;
        -webkit-animation: mO 5s linear 0s infinite;
        animation: mO 5s linear 0s infinite;
    }
    .elipsoid {  
      position:absolute;
      background:url('http://placehold.it/100/00f/fff/&text=>°))><');
      top: 0px;
      left: 0px;
      width: 100px;
      height: 100px;
      border-radius:50%;
    }
    @keyframes mO {
        0% { transform: rotate(0deg);   }
      100% { transform: rotate(360deg); }
    }
    @-webkit-keyframes mO {
        0% { -webkit-transform: rotate(0deg);   }
      100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes mX {
        0% { transform: translateX(0px);   }
       50% { transform: translateX(160px); }
      100% { transform: translateX(0px);   }
    }
    @-webkit-keyframes mX {
        0% { -webkit-transform: translateX(0px)    }
       50% { -webkit-transform: translateX(160px); }
      100% { -webkit-transform: translateX(0px)    }
    }
</style>
<div class="viewport">
    <span class="moveX">
       <div class="moveY"><span class="elipsoid"></span></div>
    </span>
</div>

eliptique movement

CSS3 Translate：翻译Ellipse路径上的元素

1 个答案: