在弯曲的路径上移动插图 [英] Move illustration on curved path

问题描述

我需要在这样的弯曲路径上移动插图图像.

I need to move illustration image on a curved path like this.

我尝试了transform:translateX，但我认为这无济于事，因为它显示了直接运动.这是我的代码.

I tried with transform: translateX but I relaized that will not help because it's showing direct movement. Here is my code.

.sun-half-wrapper {
  position: relative;
}

.sun-half {
  position: absolute;
  width: 10.5%;
  top: 12%;
  left: 13.5%;
  animation: sun 5s linear infinite;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

.sun-half img {
  width: 100%;
}
            
@keyframes sun {
  from {
    transform: translateX(10px); 
  }
  to {
    transform: translateX(500px);
  }
}

<div class="sun-half-wrapper">
  <div class="sun-half">
    <img src="http://www.freepngimg.com/download/sun/2-2-sun-high-quality-png.png" alt="logo" style="">
  </div>
</div>

有解决方案吗?这是 jsfiddle 如何使用transform-origin属性?

Any solution? Here is a jsfiddle How about using transform-origin property?

推荐答案

您可以组合两个动作:图像向右移动，容器向上移动:

You can combine two movments: the image move to the right and the container move up down:

.sun-half-wrapper {
  position: relative;
  height:80vh
}

.sun-half {
  position: absolute;
  right:0;
  left:0;
  animation: sun 5s ease-in-out  infinite;

}

.sun-half img {
  animation: image 5s ease-in-out infinite;

}
            
@keyframes sun {
  0% {
    bottom:0; 
  }
  50% {
    bottom:80px;
  }
  100% {
    bottom:0px;
  }
}
@keyframes image {
  0% {
    margin-left:0; 
  }
  100% {
    margin-left:50%;
  }

}

<div class="sun-half-wrapper">
  <div class="sun-half">
    <img src="http://www.freepngimg.com/download/sun/2-2-sun-high-quality-png.png" alt="logo" width="80">
  </div>
</div>

或者没有 position:absolute 且只需更改边距的类似内容:

Or something like this without position:absolute and by simply changing margin:

.sun-half {
  animation: sun 5s ease-in-out  infinite;
  margin-top:20%;

}

.sun-half img {
  animation: image 5s ease-in-out infinite;

}
            
@keyframes sun {
  0% {
    margin-top:20%; 
  }
  50% {
    margin-top:5%;
  }
  100% {
    margin-top:20%;
  }
}
@keyframes image {
  0% {
    margin-left:0; 
  }
  100% {
    margin-left:50%;
  }

}

<div class="sun-half-wrapper">
  <div class="sun-half">
    <img src="http://www.freepngimg.com/download/sun/2-2-sun-high-quality-png.png" alt="logo" width="80">
  </div>
</div>

我们可以通过以下转换进行优化:

We can optimize with transform:

.sun-half-wrapper {
  position: relative;
  height:80vh
}

.sun-half {
  position: absolute;
  right:0;
  left:0;
  bottom:0;
  animation: sun 5s ease-in-out  infinite;

}

.sun-half img {
  animation: image 5s ease-in-out infinite;

}
            
@keyframes sun {
  50% {
    transform:translateY(-80px);
  }
}
@keyframes image {
  100% {
    transform:translate(50vw);
  }

}

<div class="sun-half-wrapper">
  <div class="sun-half">
    <img src="http://www.freepngimg.com/download/sun/2-2-sun-high-quality-png.png" alt="logo" width="80">
  </div>
</div>

这篇关于在弯曲的路径上移动插图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！