Javascript 使html输入流动

我正在尝试移动按钮。使用css动画，我可以直接移动动画。有没有可能离开屏幕，进入屏幕，然后一个特定的运动和方向指向一个像链接这样的框。下面是我所做的

HTML

它的基本功能是定期交换类，这样按钮导航路径就会改变，从而提供动态路径的视图

function timer() {
   console.log("timer!");
   var className1 = $('#oneId').attr('class');
   var className2 = $('#twoId').attr('class');
   var className3 = $('#threeId').attr('class');

   $( "#oneId" ).removeClass(className1);
   $( "#twoId" ).removeClass(className2 );
   $( "#threeId" ).removeClass(className3);
   $( "#oneId" ).addClass(className2);
   $( "#twoId" ).addClass(className3);
   $( "#threeId" ).addClass( className1);



   // alert("class changed"+className1+":"+$('#oneId').attr('class')+","+className2+$('#twoId').attr('class')+","+className3+":"+$('#threeId').attr('class'));
}

window.setInterval(timer, 10000);

逻辑使它更像您提供的演示

• 创建多个路径，这意味着您必须创建3或4组以上的一、二、三类变体
• 周期性地改变每个路径，这样每个路径对应的函数就会触发，并且路径会相应地改变周期。当框退出方形框的边框时，设置的周期必须改变，大约2000毫秒
• 为@-webkit关键帧的顶部和左侧指定不同的起点和终点 因此，每个路径看起来都是唯一的
• 给出超出方框范围的值，使其产生从一侧进入，从另一侧离开的效果

---

请花时间正确格式化代码。这使你和其他人阅读起来容易多了。等一下，我有个主意，让我试试看

button{
-webkit-appearance:none;
 width:40px;
 height:40px;
 padding: 0;
 text-align: center;
 vertical-align: middle;
 border: 1px solid red;
 font-size:10px;
 font-weight:bold;
}

#one, #two, #three
{
position:relative;

}

#one
{
  -webkit-animation:levelseven 16s  infinite;
  -webkit-animation-direction:alternate;
}

#two
{

animation-direction:alternate;

/* Safari and Chrome */
-webkit-animation:levelseven_1 8s  infinite;
}

#three
{

animation-direction:alternate;

/* Safari and Chrome */
-webkit-animation:levelseven_2 10s  infinite;

}


@-webkit-keyframes levelseven /* Safari and Chrome */
{
0%   { left:0px; top:0px;}
25%  { left:200px; top:0px;}
50%  { left:100px; top:200px;}
75%  { left:150px; top:50px;}
100% {background:cyan; left:0px; top:0px;}
}

@-webkit-keyframes levelseven_1 /* Safari and Chrome */
{
0%   { left:0px; top:0px;}
50%  {background:darkgoldenrod; left:0px; top:200px;}
100% { left:0px; top:0px;}
  }


@-webkit-keyframes levelseven_2 /* Safari and Chrome */
{
0%   { left:0px; top:0px;}
50%  {left:200px; top:0px;}
100% {left:0px; top:0px;}
}

function timer() {
   console.log("timer!");
   var className1 = $('#oneId').attr('class');
   var className2 = $('#twoId').attr('class');
   var className3 = $('#threeId').attr('class');

   $( "#oneId" ).removeClass(className1);
   $( "#twoId" ).removeClass(className2 );
   $( "#threeId" ).removeClass(className3);
   $( "#oneId" ).addClass(className2);
   $( "#twoId" ).addClass(className3);
   $( "#threeId" ).addClass( className1);



   // alert("class changed"+className1+":"+$('#oneId').attr('class')+","+className2+$('#twoId').attr('class')+","+className3+":"+$('#threeId').attr('class'));
}

window.setInterval(timer, 10000);