Question

我只想通过弯曲的路径为我的图像制作动画。就像这样。（我使用绝对位置进行定位。）做了一些研究，发现css变换可以完成这项工作。它可以通过直线轻松完成。但曲线路径？

我尝试与css transform-origin + transform结合使用：旋转，但我没有得到我想要的确切内容。显然我想要向左移动80％左右弯曲并需要到达原始位置。我尝试了很多次调整我的代码，但仍然没有运气。

P.S

变换起源真的在这里做什么？有必要吗？有人可以解释一下transform：rotate如何在这里工作吗？

这是我的代码

.sun{
  width: 5.7%;
  position: absolute;
  top: -5%;
  left: 57%;
  animation: circle 10s linear infinite;
  transform-origin: 0px 700px;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

@keyframes circle {
  from {
    transform:rotate(-60deg); 
  }
  to { 
    transform:rotate(40deg); 
  }
}

<div class="sun">
 <img src="sun.png" alt="">
</div>

Answer 1

如果要对元素应用某些transform操作，则该转换具有应用它的位置的参考点。这是原点点，默认情况下它位于每个元素的中心（即：transform-origin(50% 50%)）。

使用此语句，您可以在需要从其他原点应用转换时修改该原点。

Here您可以在左上角完成旋转时看到一个示例。如果没有原点修改，它将围绕其中心旋转。

注意：您可以将transform-origin设置在元素之外

Answer 2

也许让父元素通过旋转移动而子元素（在我的情况下是伪元素，无论如何）使父元素的位置绝对。只需使用动画。看看我的解决方案。也许你将不得不创建一些包装并使用Follow.aggregate([ { "$match": { "user": Types.ObjectId(user_id) } }, { "$lookup": { "from": "cards", "localField": "following", "foreignField": "createdById", "as": "followingCards" } } ]).exec(function (err, doc) { console.log(JSON.stringify(doc)); })，因为它是旋转的正方形。您可以通过添加overflow: hidden来观看广场的行为。

＆＃13;

background-color

＆＃13;

@keyframes move-sun {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(90deg);
  }
}

.sun {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 200px;
  transform: rotate(90deg);
  animation: move-sun 10s;
}

.sun::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -25px;
  width: 50px;
  height: 50px;
  background-color: #ff0;
  border-radius: 50%;
}

＆＃13;

Answer 3

我意识到这是一个老问题，但是我只想添加另一个选项。您可以使用2个单独的动画，一个用于x动画，一个用于y运动：

body {
  background: #8DBECC;
}

.container {
  position: relative;
  height: 100%;
  width: 100%;
}

.sun {
  position: absolute;
  width: 30px;
  height: 200px;
  animation: x-motion 3s ease-in-out 0s infinite alternate;
 
}

.sun:before {
  content: '';
  width: 30px;
  height: 30px;
  position: absolute;
  top: 100%;
  background: #F18C3E;
  animation: y-motion 3s ease-in-out 0s infinite alternate;
  border-radius: 15px;
}

@keyframes x-motion {
  0% {
    left: 0;
  }
  
  100% {
    left: calc(100% - 30px);
  }
}

@keyframes y-motion {
  0%, 100% {
    top: 100%;
  }
  
  50% {
    top: 0%;
  }
}

<html>
<body>
<div class="container">
  <div class="sun">
  </div>
</div>
</body>
</html>

https://jsfiddle.net/561pbt0r/27/

Answer 4

使用CSS可能并不容易，但您可以使用SVG动画轻松完成此操作。

我为您的案例修改了此tutorial的样本：

＆＃13;

<svg width="500" height="350" viewBox="0 0 350 350">
  
  <path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M100,100Q250,-50,400,100"/>
  
  <g id="sun" transform="translate(-100, -300)">
    <circle cx="100" cy="300" r="25" fill="yellow"/>
</g>
   
  <animateMotion 
           xlink:href="#sun"
           dur="3s"
           begin="0s"
           fill="freeze"
           repeatCount="indefinite"           
             >
    <mpath xlink:href="#motionPath" />
  </animateMotion>
</svg>

＆＃13;

CSS - 弯曲路径中的Animate对象

4 个答案: