animation实现小物体按照轨迹运动动画效果

最新推荐文章于 2024-03-28 14:32:13 发布

原创最新推荐文章于 2024-03-28 14:32:13 发布 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

25 篇文章

订阅专栏

这篇博客讲述了作者使用CSS3动画实现一个小火车按照预设轨迹移动的效果，但遇到缩放导致车车偏离轨迹的问题。作者提到了使用@media查询进行分辨率适配的解决方案，但承认这并非最佳方法，并表示会留待日后改进。博客内容涉及前端开发中的CSS动画和响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果如图：
在这里插入图片描述
做完发现其实是有点蠢的实现方案，但是目前自己没有找到更好的方法，（这玩意存在不同分辨率不按照轨迹来的问题），因为在实现的时候是用的一个背景图作为轨迹，每一个点是自己找出来的，图片缩放可能导致车车不在轨迹上。
算了以后有时间在解决吧
代码：
html（react写的）
在这里插入图片描述
css

  .miniTrain {
    width: 40px;
    height: 40px;
    position: absolute;
    animation: myfirstMin 10s;
    left: 1102px;
    top: 368px;
    /*infinite  是循环播放*/
    -webkit-animation: myfirstMin 10s infinite ; /* Safari and Chrome */
    animation-fill-mode: forwards;
  }
  @keyframes myfirstMin {
  25% {
    left: 1102px;
    top: 368px;
  }
  50% {
    left: 1008px;
    top: 277px;
  }
  75% {
    left: 899px;
    top: 220px;
  }
  100% {
    left: 868px;
    top: 220px;
  }
}

解决不同分辨率的话可以使用CSS3的 @media 查询（我这里是以1600px为分界值，可以按照自己需求改）

@media screen and (max-width: 1600px) {
  .miniTrain {
    width: 200px;
    height: 200px;
    position: absolute;
    animation: myfirstMin 10s;
    left: 1102px;
    top: 368px;
    -webkit-animation: myfirstMin 10s infinite ; /* Safari and Chrome */
    animation-fill-mode: forwards;
  }
}

@media screen and (min-width: 1600px) {
  .miniTrain {
    width: 40px;
    height: 40px;
    position: absolute;
    animation: myfirst 10s;
    left: 1292px;
    top: 368px;
    -webkit-animation: myfirst 10s infinite ; /* Safari and Chrome */
    animation-fill-mode: forwards;
  }
}

@keyframes myfirst {
  25% {
    left: 1292px;
    top: 368px;
  }
  50% {
    left: 1208px;
    top: 277px;
  }
  75% {
    left: 1099px;
    top: 220px;
  }
  100% {
    left: 1068px;
    top: 220px;
  }
}

@keyframes myfirstMin {
  25% {
    left: 1102px;
    top: 368px;
  }
  50% {
    left: 1008px;
    top: 277px;
  }
  75% {
    left: 899px;
    top: 220px;
  }
  100% {
    left: 868px;
    top: 220px;
  }
}