使对象从右向左滑动

Question

我想使用css动画从右到左滑动一些对象。我希望页面顶部的高度是随机的，动画的速度也是随机的。我已经设法通过使用JavaScript来做到这一点。问题是对象随机地刷新＆＃34;或者全面跳转。我尝试了很多不同的方法，看看是不是我，但我找不到问题。
我希望的最终结果是这个网站的背景。 https://realtimebitcoin.info/

这是我的代码。

谢谢

编辑：我忘了提到这只适用于Chrome现在

＆＃13;

＆＃13;

"use strict";

/*jslint devel: true */
var box1 = document.getElementById("boxref1");
var root = document.querySelector(':root');
var x = Math.floor((Math.random() * 850) + 1);
var s = Math.floor((Math.random() * 10) + 4);
var x1 = x;
var x2 = x;
var x3 = x;
var x4 = x;
var x5 = x;
var s1 = s;
var s2 = s;
var s3 = s;
var s4 = s;
var s5 = s;
var time1 = s1 + "000";
var time2 = s2 + "000";
var time3 = s3 + "000";
var time4 = s4 + "000";
var time5 = s5 + "000";


function randload() {
  x = Math.floor((Math.random() * 850) + 1);
  s = Math.floor((Math.random() * 10) + 4);
}

//sets x1 and s1 var when called
function rel1() {
  randload();
  x1 = x;
  s1 = s;
  time1 = s1 + "000";
}
//sets x2 and s2 var when called
function rel2() {
  randload();
  x2 = x;
  s2 = s;
  time2 = s2 + "000";
}
//sets x3 and s3 var when called
function rel3() {
  randload();
  x3 = x;
  s3 = s;
  time3 = s3 + "000";
}
//sets x4 and s4 var when called
function rel4() {
  randload();
  x4 = x;
  s4 = s;
  time4 = s4 + "000";
}
//sets x5 and s5 var when called
function rel5() {
  randload();
  x5 = x;
  s5 = s;
  time5 = s5 + "000";
}


//sends speed and height value to css box 1
function height1() {
  var root = document.querySelector(':root');
  root.style.setProperty("--speed1", s1 + "s");
  root.style.setProperty("--top1", x1 + "px");
}
//sends speed and height value to css box 2
function height2() {
  var root = document.querySelector(':root');
  root.style.setProperty("--speed2", s2 + "s");
  root.style.setProperty("--top2", x2 + "px");
}
//sends speed and height value to css box 3
function height3() {
  var root = document.querySelector(':root');
  root.style.setProperty("--speed3", s3 + "s");
  root.style.setProperty("--top3", x3 + "px");
}
//sends speed and height value to css box 4
function height4() {
  var root = document.querySelector(':root');
  root.style.setProperty("--speed4", s4 + "s");
  root.style.setProperty("--top4", x4 + "px");
}

//sends speed and height value to css box 5
function height5() {
  var root = document.querySelector(':root');
  root.style.setProperty("--speed5", s5 + "s");
  root.style.setProperty("--top5", x5 + "px");
}

//shows values in console
function debug() {
  console.log("Height = " + x);
  console.log("Height1 = " + x1);
  console.log("Height2 = " + x2);
  console.log("Height3 = " + x3);
  console.log("Height4 = " + x4);
  console.log("Height5 = " + x5);
  console.log("speed = " + s);
  console.log("speed1 = " + s1);
  console.log("speed2 = " + s2);
  console.log("speed3 = " + s3);
  console.log("speed4 = " + s4);
  console.log("speed5 = " + s5);
  console.log("Time1 = " + time1);
  console.log("Time2 = " + time2);
  console.log("Time3 = " + time3);
  console.log("Time4 = " + time4);
  console.log("Time5 = " + time5);
  console.log("_");
}

//reloads functions
var ref1 = setInterval(rel1, time1);
var ref2 = setInterval(rel2, time2);
var ref3 = setInterval(rel3, time3);
var ref4 = setInterval(rel4, time4);
var ref5 = setInterval(rel5, time5);
var ref6 = setInterval(height1, time1);
var ref7 = setInterval(height2, time2);
var ref8 = setInterval(height3, time3);
var ref9 = setInterval(height4, time4);
var ref10 = setInterval(height5, time5);
var ref11 = setInterval(debug, 1000);


window.onload = function() {
  debug();
  height1();
  height2();
  height3();
  height4();
  height5();
};

＆＃13;

:root {
  --top1: 0;
  --top2: 0;
  --top3: 0;
  --top4: 0;
  --top5: 0;
  --speed1: 0;
  --speed2: 0;
  --speed3: 0;
  --speed4: 0;
  --speed5: 0;
}

div.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  -webkit-animation-name: example1;
  -webkit-animation-duration: var(--speed1);
  animation-name: example1;
  animation-duration: var(--speed1);
  z-index: 4;
  padding: 0px;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
}

div.box2 {
  width: 100px;
  height: 100px;
  background-color: black;
  position: absolute;
  -webkit-animation-name: example2;
  -webkit-animation-duration: var(--speed2);
  animation-name: example2;
  animation-duration: var(--speed2);
  z-index: 5;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}

div.box3 {
  width: 100px;
  height: 100px;
  background-color: orange;
  position: absolute;
  -webkit-animation-name: example3;
  -webkit-animation-duration: var(--speed3);
  animation-name: example3;
  animation-duration: var(--speed3);
  z-index: 6;
  animation-delay: 2.5s;
  animation-iteration-count: infinite;
}

div.box4 {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: absolute;
  -webkit-animation-name: example4;
  -webkit-animation-duration: var(--speed4);
  animation-name: example4;
  animation-duration: var(--speed4);
  z-index: 7;
  animation-delay: 3s;
  animation-iteration-count: infinite;
}

div.box5 {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  -webkit-animation-name: example5;
  -webkit-animation-duration: var(--speed5);
  animation-name: example5;
  animation-duration: var(--speed5);
  z-index: 8;
  animation-delay: 1.25s;
  animation-iteration-count: infinite;
}

@keyframes example1 {
  0% {
    top: var(--top1);
    left: 1800px;
  }
  100% {
    top: var(--top1);
    left: -150px;
  }
}

@keyframes example2 {
  0% {
    top: var(--top2);
    left: 1800px;
  }
  100% {
    top: var(--top2);
    left: -150px;
  }
}

@keyframes example3 {
  0% {
    top: var(--top3);
    left: 1800px;
  }
  100% {
    top: var(--top3);
    left: -150px;
  }
}

@keyframes example4 {
  0% {
    top: var(--top4);
    left: 1800px;
  }
  100% {
    top: var(--top4);
    left: -150px;
  }
}

@keyframes example5 {
  0% {
    top: var(--top5);
    left: 1800px;
  }
  100% {
    top: var(--top5);
    left: -150px;
  }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <intercept-url pattern="/favicon.ico" access="ROLE_ANONYMOUS" />
  <script type="text/javascript" src="java.js"></script>
</head>




<body>
  <div id="boxref1">
    <div class="box1">1</div>
  </div>

  <div id="boxref2">
    <div class="box2">2</div>
  </div>

  <div id="boxref3">
    <div class="box3">3</div>
  </div>

  <div id="boxref4">
    <div class="box4">4</div>
  </div>

  <div id="boxref5">
    <div class="box5">5</div>
  </div>



</body>

</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我没有看到你提到的问题。由于左侧属性的动画，这可能是一个性能问题。

您应该仅使用left和top属性随机化框的第一个位置，然后使用

left: -150px

而不是

multiselect()

将它们移到左侧。

更改动画中的左侧或顶部属性会导致大量浏览器重新绘制。您可以使用＆＃34;油漆闪烁＆＃34;自己检查它。在chrome dev工具中的渲染选项卡上标记。