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

Question

全部

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

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

Answer 1

从您的澄清评论中：

给定一个位置，如何使图像或元素围绕它

CSS3 动画

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

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

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

在 CSS/jQuery 中指定位置

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

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

如果您想不断地将动画置于鼠标光标的中心，您需要使用 jQuery 来处理mousemove文档上的事件，并设置元素 CSS 的left和top属性。

就像是：

$(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);
});

文档

• 当前的 CSS3 动画规范
• 当前的 CSS3 2D 转换规范。
• 关于如何使用 CSS3 动画的基本 w3schools 教程。
• jQuery.mousemove处理程序方法
• jQuery .csssetter 方法

代码示例

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

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

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

浏览器支持

请参阅此页面的 CSS3 动画支持矩阵，以及此页面的 CSS3 2D 变换支持矩阵。

要点是：

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

Answer 2

我认为这就是您所要求的：http: //jsfiddle.net/BZSQd/

如果您有任何问题，请告诉我：）

---

@-webkit-keyframes spin {
    from { -webkit-transform: rotateZ(0); }
    to   { -webkit-transform: rotateZ(-360deg); }
}

div {
    border   : 1px solid #000;
    width    : 1px;
    height   : 1px;
    position : absolute;
    -webkit-animation        : spin 8s infinite linear;
    -webkit-transform-origin : 50px 50px;
}