用道路动画化褶皱

Question

我正在尝试为图片上的道路上的卡车制作动画。我已经为它做了下面的剪辑。所有图像都在 svg 文件上。但我不确定如何为道路上的褶皱设置动画。我如何设置卡车的动画，使其在道路内行驶？

.page-header {
  background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
  height: 800px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 790px;
}

.truck-1 {
  width: 100px;
    position: absolute;
    top: 57%;
    left: 29%;
    width: 80px;
}

.truck-2 {
  width: 100px;
    position: absolute;
    top: 76%;
    left: 62%;
    transform: rotate(32deg);
    width: 80px;
}

<div class="page-header">
  <img class="truck-1" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
  <img class="truck-2" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
</div>

Answer 1

您需要检查的是CSS Animations。在那之后，你可以这样去做：

.page-header {
  position: relative;
  background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
  height: 800px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 790px;
}

.truck-1 {
  width: 100px;
  position: absolute;
  top: 57%;
  left: 29%;
  width: 80px;
  animation: truck1 5s infinite;
}

@keyframes truck1 {
  0% {
    top: 57%;
    left: 29%;
    transform: rotate(0);
  }
  20% {
    top: 68%;
    left: 20%;
    transform: rotate(0);
  }
  40% {
    top: 68%;
    left: 20%;
    transform: rotate(90deg);
  }
  60% {
    top: 30%;
    left: 5%;
    transform: rotate(90deg);
  }
  80% {
    top: 30%;
    left: 5%;
    transform: rotate(120deg);
  }
  100% {
    top: 10%;
    left: 5.5%;
    transform: rotate(120deg);
  }
}

<div class="page-header">
  <img class="truck-1" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
</div>

也在 JSFiddle.

请注意，为了使用绝对定位和百分比，父元素必须是 position: relative; 或 static 以外的任何其他元素。

Answer 2

你需要吗？

.page-header {
  animation: trucks 10s infinite;
  background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
  height: 800px;
  background-size: 100%;
  background-position: center;
  width: 790px;
}

.truck-1 {
  width: 100px;
    position: absolute;
    top: 57%;
    left: 29%;
    width: 80px;
}

.truck-2 {
  width: 100px;
    position: absolute;
    top: 76%;
    left: 62%;
    transform: rotate(32deg);
    width: 80px;
}

@keyframes trucks {  
  0% {background-position: 0 0; } 
  100% {background-position: 0 -2100px; } 
}

<div class="page-header">
  <img class="truck-1" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
  <img class="truck-2" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
</div>

用道路动画化褶皱

Animate the tuck with the road

javascript

css

animation

css-animations

svg-animate