用道路动画填塞

问题描述

我正在尝试使卡车在图像上的道路上动起来。我已经在下面对此进行了摘录。所有图像都在svg文件中。但是我不确定如何在道路上为the做动画。我如何为卡车设置动画以使其在道路上行驶？

.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>

解决方法

您需要检查的是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以外的任何其他元素。

,

您需要吗？

.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>