jquery - 我怎样才能让动画跟随我的光标

Question

因此，目前，如果您将鼠标悬停在罗盘上，指针会旋转，但是，当您将鼠标移开时，它只会重置。

有什么方法可以:

• 当我的鼠标悬停在上面时，让指针跟随我的鼠标，如果我在南边的位置离开鼠标，指针会留在那儿

或

• 像现在一样在悬停时旋转，但当我将鼠标移开时暂停并在我重新悬停时恢复

可以在以下位置找到该网站

newsunken.tumblr.com

我当前的代码是...

.arrow {
    background-image: url(compass.png);
}

.arrowhover {
    position: absolute;
    margin-top: -72px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transition: all 0s ease-in-out;
    -moz-transition: all 0s ease-in-out;
    -ms-transition: all 0s ease-in-out;
    -o-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out;
}

(即当我拿开鼠标时，箭头停止旋转)

自旋码是

.arrowhover:hover {
    -webkit-transform: rotate(1440deg);
    -moz-transform: rotate(1440deg);
    -webkit-transition: all 1.7s ease-out;
    -moz-transition: all 1.7s ease-in-out;
    -ms-transition: all 1.7s ease-in-out;
    -o-transition: all 1.7s ease-in-out;
    transition: all 1.7s ease-in-out;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Answer 1

我认为您不能仅使用 CSS 来做到这一点。您将必须使用 javascript 来获取鼠标的 x 和 y 位置，当它在罗盘区域内时，根据鼠标位置旋转它。

也许这对你有用: How to rotate image in relation to mouse position?