如何使用jquery和CSS3 KeyFrames围绕点或鼠标周围的div或图像等元素？
所有
我有一个问题，试图使用jquery和css3关键帧移动或循环一个元素，如div或图像周围的点或鼠标继续，而不是延迟时间，只是保持圈。
有解决方案吗 请给我看。 提前致谢 ！
从您的澄清评论：
给定一个位置，如何使图像或元素圈出来
CSS3动画
要制作动画，您可以平滑地围绕点旋转元素并永久地继续，您可以使用这些CSS3关键帧/动画和2D变换属性：
-
animation以指定时间和要使用的关键帧。 -
animation-timing-function指定您想要平滑动画（linear）。 -
@keyframes指定如何为元素设置动画。 -
transform-origin围绕div中心以外的点旋转（一些偏移）。 -
transform以将元素从旋转中心（轨道半径）移出。 -
rotate(指定要在关键帧中旋转。);
您可能需要复制这些并使用-webkit- ，- -moz-和-ms-为它们添加前缀一段时间，直到广泛支持CSS3动画function。
在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方法
代码示例
我已经构建了一个代码示例来研究您自己构建它所需的函数和引用。 由于另一个答案已经给了你他们的代码样本，我会继续发布我的。
我强烈建议你自己构建这个，这样你就可以了解这些东西是如何工作的:)
浏览器支持
请参阅此页面，其中包含CSS3动画支持矩阵 ， 此页面包含CSS3 2D变换支持矩阵 。
要点是：
- 它只能在IE 10.0及更高版本中使用。 它不适用于IE9
- 它几乎适用于任何版本的Firefox或Chrome
- 它应该在Safari 4.0及更高版本中有效
- 它可能在Opera中不起作用（我需要
-o-Tranform标签使它工作，而动画支持还没有）
我想这就是你要求的： 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; }