使html输入流动

Question

我正在尝试移动按钮Like this demo。使用css动画我可以直接动画移动。是否有可能离开屏幕进入屏幕并进入一个特殊的运动和方向到像链接这样的盒子。这就是我所做的。

HTML

<div id="box" style='width:200px;height:200px;border:1px solid black;'/>

<button id="one" type="button" >Button1</button>
<button id="two" type="button" >Button2</button>
<button id="three" type="button">Button3</button>

CSS

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

Here's demo

Answer 1

Here is a logic very simple one

它基本上做的是它定期交换类，以便按钮导航路径改变，以便提供动态路径视图

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-keyframes的顶部和左侧提供不同的起点和终点 所以每条路径看起来都很独特
• 给出超出盒子范围的值，以便它通过一侧进入并通过其他方式进入