时间戳

首页 > 解决方案 > 如何将我的图片动画到另一个点

html - 如何将我的图片动画到另一个点

问题描述

HTML 和 CSS 的新手。谁能教我如何将我的图片从我当前的位置动画到另一个位置？例如，从移动"top: 280px: left 600px;"到"top:180px; left 500px;"

需要人指导一下，谢谢。以下是我当前的代码：

#robot {
  position: fixed;
  top: 280px;
  left: 600px;
  border-radius: 50%;
  width: 50px;
  height: 60px;
}

body {
  height: 100%;
  width: 100%;
  background-image: url('TPHRG floorplan1.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* background-position: center; */
  background-size: 980px 400px, cover;
}
<img id="robot" src="https://img.favpng.com/20/7/18/clip-art-robot-free-content-image-vector-graphics-png-favpng-pJhfbKDrGy0yuQsKVTrjEu7br.jpg">

标签： htmlcss

解决方案

是的，你可以通过简单的使用 css 来做到这一点。

<html>
  <head>
  <meta charset="utf-8">
  <title></title>

  <style>

    #robot {
      position: fixed;
      top: 280px;
      left: 600px;
      border-radius: 50%;
      width: 50px;
      height: 60px;
      -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
    }

    body {
      height: 100%;
      width: 100%;
      background-image: url('TPHRG floorplan1.png');
      background-repeat: no-repeat;
      background-attachment: fixed;
      /* background-position: center; */
      background-size: 980px 400px, cover;
    }
    
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  from {top: 280px;left:600px;}
  to {top: 180px;left:500px;}
}

/* Standard syntax */
@keyframes example {
  from {top: 280px;left:600px;}
  to {top: 180px;left:500px;}
}

  </style>

  <body>

    <img id="robot" src="https://www.w3schools.com/images/compatible_chrome.gif">

    <?php ?>

  </body>
</html>

推荐阅读