如何使用jquery和CSS3 KeyFrames在一个点或鼠标周围使用div或图像等元素？ [英] how to circle an element such as div or image around a point or mouse using jquery and CSS3 KeyFrames?

问题描述

全部

我有一个问题，试图使用jquery和css3关键帧移动或循环的元素，如div或图像周围的点或鼠标继续，延迟时间，只是保持周围。

i have a problem in trying to using jquery and css3 keyframe to move or circle an element such as div or image around a point or mouse continues, not delay time, just keep circle around.

任何解决方案？请给我看。提前致谢 ！

Any solution ? please show me. thanks in advance !

推荐答案

从您的澄清评论：

给定位置，如何制作图片或元素圈子

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

CSS3动画

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

CSS3 Animation

To make an animation where you rotate an element around a point smoothly and continue forever, you can use these CSS3 keyframe/animation and 2D transformation properties:

• 动画 来指定时间和要使用的关键帧。


• animation-timing-function 指定您想要一个平滑的动画$ c> linear ）。


• @keyframes 指定如何为元素设置动画。


• transform-origin


• transform 将元素从旋转中心（轨道半径）移出。
  
• rotate（< ; angle>）; 以指定要在关键帧中旋转。

• animation to specify timing and which keyframes to use.
• animation-timing-function to specify that you want a smooth animation (linear).
• @keyframes to specify exactly how to animate the element.
• transform-origin to rotate around a point other than the center of the div (some offset).
• transform to move the element out from the center of rotation (radius of orbit).
• rotate(<angle>); to specify that you want to rotate in your keyframe(s).

您可能需要使用 -webkit - ， -moz - 和<$

You will probably need to duplicate these and prefix each with -webkit-, -moz- and -ms- for a while until the CSS3 animation features are widely supported.

您可以使用简单的CSS在任意点周围旋转HTML元素：

You can use plain-old CSS to rotate an HTML element around an arbitrary point:

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

如果您想连续将鼠标光标置于动画中心，需要使用jQuery来处理文档上的 mousemove 事件，并设置 left 和

If you want to continually center your animation on the mouse cursor, you'll need to use jQuery to handle the mousemove event on the document, and set the left and top properties of the element's 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);
});

文件

• 当前的CSS3动画规格


• 当前的CSS3 2D转换规格。


• 关于如何使用CSS3动画的基本w3schools教程。


• jQuery .mousemove 处理程序方法< a>


• jQuery .css setter method



Docs

• 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

我已经构建了一个代码示例来研究您需要自己构建的函数和引用。

I had built a code sample to research the functions and references you'd need to build this on your own. Since the other answer already gave you their code sample, I'll go ahead and post mine.



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


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

我强烈建议您自己编译，以便了解这些功能如何工作）

I highly recommend you build this out yourself so you can learn how these things work :)

请参见此页面上的CSS3动画支持矩阵，以及此页面带有CSS3 2D Transform支持矩阵。

gist is：



• 它只能在IE 10.0及更高版本中使用。


• 它应该可以在Safari 4.0及更高版本中使用
/ li>

• 它可能不会在Opera中工作（我需要 -o - Tranform标签使它工作，只是还没有）


• It will only work in IE 10.0 and above. It won't work in IE9
• It will work in pretty much any version of Firefox or Chrome
• It should work in Safari 4.0 and later
• It probably won't work in Opera (I'd need -o- Tranform tags to make it work, and the Animation support just isn't there yet)

这篇关于如何使用jquery和CSS3 KeyFrames在一个点或鼠标周围使用div或图像等元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！