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?

如何按照光标制作动画

1 个答案: