Question

我想根据鼠标移动用css transform translate3d实现subtil div位置变化的效果。类似于本网站主页部分的几何图形： http://riccardozanutta.com/

我试过了：

$(window).mousemove(function(event) {
  $(".home-img").css({"left" : event.pageX, "top" : event.pageY});
});

单个图像位于绝对位置且工作正常（图像根据鼠标移动改变位置），但是当我尝试使用类.basic-skill

设置3个div的动画时

$(window).mousemove(function(event) {
  $(".basic-skill").css({"left" : event.pageX, "top" : event.pageY});
});

它们离开视口（当它们相对定位时）或它们彼此重叠（当它们位于绝对位置时）。

此外，我不知道如何将移动限制为最大5像素，而不是让它在整个视口移动。

非常感谢您的指导！

Answer 1

解决最大5px位移的问题，您可以将X和Y坐标乘以0.1等因子以减少移动量。像这样：

$(".basic-skill").css({"left" : event.pageX * 0.1, "top" : event.pageY * 0.1});

编辑：您可以将top和left与静态margin-top一起使用，而不是使用margin-left和top CSS中的left值。 JSFiddle

CSS

position: absolute;
top: 50px;
left: 50px;

JS

$("#two").css({"margin-left" : -(event.pageX * 0.1), "margin-top" : -(event.pageY * 0.1)});

但这只是一个简单易行的问题。在您提供的演示页面中，他使用了SVG元素的CSS动画。这就是为什么它似乎优雅，如果我可以（缓和）