Question

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

＆＃13;

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';
        }
    }
}

＆＃13;

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;
 }

＆＃13;

<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>

＆＃13;

Answer 1

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动画突出显示

1 个答案: