Question

我对网站有一个想法，但我不知道从哪里开始执行它。我想创建一个圆圈，当用户将光标移动到圆圈上时，该圆圈将分为两部分。然后，用户可以单击两个分割部分中的一个，并且将出现围绕第一个的其他圆圈。我需要一些特殊的库或框架才能做到这一点？我发现了这个：http://greensock.com/gsap它有用吗？我想我想用一个简单的库或一套工具创建一个不可能重现的硬动画。谢谢。

编辑：这就是我想要的。当用户在其上移动鼠标时，屏幕中间的圆圈将分为两部分（顶部和底部）。在这两个部分下面应该有两个字符串，一个在顶部下面，一个在底部下面。当用户单击一个字符串时，其他circleso应该出现在第一个字符串周围。

Answer 1

没有！您不需要使用任何框架。为此，您可以使用HTML或canvas元素;

拆分（HTML）

关于拆分部分，你应该有两个内联div（每个都应该有display属性为inline），它的宽度为50％，你想要的高度为100％， CSS overflow属性为hidden（隐藏圆圈部分中的一部分），然后必须添加一个圆角div（border-radius:100%），其中包含圆圈所需的全部尺寸将分为两部分。

注意：圆圈中的第二个div（第二个部分）必须具有部分宽度的负边距，例如：margin-left:-50px，因此它将正确显示。

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

使每个部分X和Y可移动

要为圈子中的每个部分设置动画，基本上您必须将每个div设置为position:relative以生成x（CSS left属性）和y（CSS {{ 1}} property）可移动。

CSS过渡

你需要将CSS过渡添加到两个div（圆圈中的部分），它们是这些属性：

（注意：您没有义务使用CSS转换，但它更简单;您可以通过自己的JavaScript使用计时器为它们设置动画）

top

您将不得不添加这些-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（等等）以使许多浏览器的转换支持更长，这取决于它们解释属性的形式。 CSS过渡属性称为-webkit-;在此属性中，您可以定义要转换的CSS属性。

E.g：

transition

x=20;x=15

我不会教这么多关于这个属性，但你可以有一个基本的知识。定义要转换的属性后，必须在SECONDS中定义时间，它是转换的速度。毫秒在20, 18, 16, 15之后，但是可选。

.

您可以使用逗号（0s 0.5s 0.2s 1s 2s）在一个转换中定义许多属性，例如：

,

（我用逗号后的额外空格作为好例子）

JavaScript中的修改

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

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

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

YourElement.style.top="20px"//would set the CSS top property, it's coord. Y

可以在DOM元素或onmouseover, ontouchstart, onclick, onmousedown中定义：

window

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

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

1 个答案: