javascript - Javascript动画重点

当我们执行这段代码时，一个小盒子出现在一个大盒子的左上角，在开始和结束时，它在大盒子的右下角，我希望从左上角到右下角必须显示一条对角线，因为它是小盒子走过的路径（或者我可以说我想突出显示小盒子走过的路径）。有人能帮我吗？

function slider()
{
    var t=setInterval(display,3);
    var pos=0;
    var x=document.getElementById("a1");
    function display()
    {
        if(pos==350)
            clearInterval(t);
        else
        {
            pos++;
            x.style.top=pos+'px';
            x.style.left=pos+'px';
        }
    }
}

h2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial,
    sans-serif;
    text-align: center;
    font-size: 50px;
    color: rgb(100, 158, 13);
    background-color: bisque;
    border: 5px red groove;
}

body{
    background-color: cornflowerblue;
}

.container{
    background: black;
    height: 400px;
    width: 400px;
    position: relative;
}

.box{
    background: whitesmoke;
    height: 50px;
    width: 50px;
    position: absolute;
 }

<h2>This is my first animation code</h2>
<center>
<div class="container">
    <div id="a1" class="box">
    </div>
</div>
<p>
    <button type="button" onclick="slider()">click here</button>
</p>
</center>

最佳答案

CSS并不是专门为这个设计的，但是…
…您可以使用另一个元素来伪造此效果：

function slider() {
  var t = setInterval(display, 3);
  var pos = 0;
  var a1 = document.getElementById("a1");
  var path = document.getElementById("path");

  function display() {
    if (pos == 350)
      clearInterval(t);
    else {
      pos++;
      a1.style.top = pos + 'px';
      a1.style.left = pos + 'px';
      path.style.height = pos + 'px';
      path.style.width = pos + 'px';
    }
  }
}

body {
  background-color: cornflowerblue;
}

.container {
  background: black;
  height: 400px;
  width: 400px;
  position: relative;
}

.box {
  position: absolute;
  background: whitesmoke;
  height: 50px;
  width: 50px;
}

#path {
  position: absolute;
  height: 0;
  width: 0;
  margin: 25px;
  background: linear-gradient(to top right, transparent 49%, red 50%, transparent 51%);
}

<div class="container">
  <div id="path"></div>
  <div id="a1" class="box"></div>
</div>
<button type="button" onclick="slider()">click here</button>

当然，如果希望框在第一次移动后再次移动，则必须使用另一个元素，依此类推…
希望有帮助。

关于javascript - Javascript动画重点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50836947/