jquery - 如何使用 jquery 和 CSS3 KeyFrames 将元素(例如 div 或图像)围绕点或鼠标圈出？

Question

全部

我在尝试使用 jquery 和 css3 关键帧来移动或围绕某个点或鼠标继续移动或环绕元素(例如 div 或图像)时遇到问题，而不是延迟时间，只是保持环绕。

有什么解决办法吗？请让我看看。提前致谢 !

Answer 1

来自您的澄清评论:

given a position, how to make a image or element circle it

CSS3 动画

要制作围绕某个点平滑旋转元素并永远持续的动画，您可以使用这些 CSS3 关键帧/动画和 2D 转换属性:

• animation 指定时间和要使用的关键帧。
• animation-timing-function 指定您想要平滑的动画 ( linear )。
• @keyframes 准确指定如何为元素设置动画。
• transform-origin 绕 div 中心以外的点旋转(某些偏移)。
• transform 将元素移出旋转中心(轨道半径)。
• rotate(<angle>); 指定您要在关键帧中旋转。

您可能需要复制这些并在每个前缀前加上 -webkit- , -moz-和-ms-一段时间，直到 CSS3 动画功能得到广泛支持。

在 CSS/jQuery 中指定位置

您可以使用普通的 CSS 围绕任意点旋转 HTML 元素:

div.someClass {
    position:absolute;
    top:250px;
    left:350px;
}

如果您希望持续将动画集中在鼠标光标上，则需要使用 jQuery 来处理 mousemove文档上的事件，并设置 left和top元素 CSS 的属性。

类似于:

$(document).mousemove(function(event) {
    var animated = $("#animated");
    var offsetX = 50; // Pixels to the right of the cursor
    animated.css("left", event.pageX + offsetX);
    animated.css("top", event.pageY - animated.height() / 2);
});

文档

• The current CSS3 animation specs
• The current CSS3 2D transformation specs .
• A basic w3schools tutorial on how to use CSS3 animations .
• The jQuery .mousemove handler method
• The jQuery .css setter method

代码示例

我构建了一个代码示例来研究您自己构建它所需的功能和引用。由于其他答案已经为您提供了他们的代码示例，因此我将继续发布我的代码示例。

• http://jsfiddle.net/vLwDc/1/

我强烈建议您自己构建这个，这样您就可以了解这些东西是如何工作的:)

浏览器支持

参见this page with a CSS3 Animation support matrix ，和this page with a CSS3 2D Transform support matrix .

要点是:

• 它仅适用于 IE 10.0 及以上版本。它在 IE9 中不起作用
• 它几乎适用于任何版本的 Firefox 或 Chrome
• 它应该适用于 Safari 4.0 及更高版本
• 它可能无法在 Opera 中工作(我需要 -o- 转换标签才能使其工作，而且动画支持尚不存在)