如何使用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
.css
setter方法
代码示例
我已经构建了一个代码示例来研究您自己构建它所需的函数和引用。 由于另一个答案已经给了你他们的代码样本,我会继续发布我的。
我强烈建议你自己构建这个,这样你就可以了解这些东西是如何工作的:)
浏览器支持
请参阅此页面,其中包含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; }