Question

我试图用css，jquery和html为学校做一个图形演示，我需要一个矩形在屏幕上移动。我已经完成了一些研究，并且我尝试过使用animate函数的几种变体，但它并没有解决它只位于窗口的左侧。

这是我的参考代码：

＆＃13;

var derp = 20;
function scroll() {
  var scrollLeft = Math.floor(Math.random() * 100);
  $('#rectangle').animate({
    left: scrollLeft "px",
  }, derp, function() {
    scroll();
  });
}

setInterval(100, scroll());

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
}

.rectangle {
  width: 20px;
  height: 100%;
  background: black;
}

#rectangle {
  left: 10px;
  position: absolute;
}

img,
div,
p,
body {
  margin: 0px;
  padding 0px;
}

＆＃13;

<div class="rectangle"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

＆＃13;

Answer 1

您只能使用CSS执行此操作。

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: anim 3s forwards alternate;
  animation-iteration-count: 6;
}

@keyframes anim {
  from {
    left: 0px;
  }
  to {
    left: 200px
  }
}

<div></div>

使用.animate移动css形状

1 个答案: