javascript - 为网站创建交互式对象动画

Question

<分区>

Answer 1

不!您不需要使用任何框架。 为此，您可以使用 HTML 或 Canvas 元素；

拆分 (HTML)

关于拆分部分，您应该有两个内联 div(每个都应具有 CSS display 属性作为 inline)，其宽度为 50%，宽度为 100%你想要的高度，将 CSS overflow 属性设置为 hidden(从圆圈部分隐藏一个部分)，然后必须在其中添加一个圆 Angular div(border -radius:100%) 和你想要的圆的完整尺寸，它将被分成两部分。

注意:圆圈的第二个 div(第二部分)必须与该部分的宽度有负边距，例如:margin-left:-50px，所以它会出现正确。

然后这2个div形成一个圆圈，可以分成两部分。

让每个部分 X 和 Y 都可以移动

要为圆圈中的每个部分设置动画，基本上您必须将每个 div 设置为 position:relative 以使它们的 x(CSS left 属性) 和 y(CSS top 属性)可移动。

CSS 过渡

您需要向两个 div(圆圈的部分)添加 CSS 过渡，它们是这些属性:

(注意:您不是必须使用 CSS 过渡，但它更简单；您可以通过自己的 JavaScript 使用计时器为它们设置动画)

-webkit-transition:left 0.2s
-o-transition:left 0.2s
-ms-transition:left 0.2s
-moz-transition:left 0.2s
-ms-transition:left 0.2s
transition:left 0.2s

不幸的是，您必须添加这些 -webkit-(等...)以使许多浏览器的转换支持时间更长，这取决于它们解释属性的形式。 CSS 过渡属性称为 transition；在此属性中，您可以定义要转换的 CSS 属性。

例如:

x=20;x=15

20, 18, 16, 15

关于属性我就不教那么多了，大家可以有个基本的了解。 定义要转换的属性后，您必须以秒为单位定义时间，它是转换的速度。毫秒在 . 之后，但可选。

0s 0.5s 0.2s 1s 2s

您可以使用逗号 (,) 在一次转换中定义多个属性，例如:

top 0.5s, left 2.5s, background-color 10s, etc...

(我在逗号后使用了额外的空格作为很好的例子)

JavaScript 中的修改

现在您可以从 JavaScript 设置 CSS 属性，如下所示:

YourElement.style.top="20px"//将设置 CSS top 属性，它是坐标。是

您可以在脚本中使用的事件如下:

onmouseover、ontouchstart、onclick、onmousedown

可以在 DOM 元素或 window 中这样定义:

YourElement.onmouseover=function(){
    alert("The mouse cursor passed over me!")
};
//adding event using onmouseover property
YourElement.addEventListener("mouseover",function(){
    alert("The mouse cursor passed over me!")
})
//adding event using addEventListener(name, function)

我仍然应该更新答案以完成它。