css如何让控制跟着鼠标移动

随着互联网的发展，网页越来越漂亮，人们也越来越注重网页的交互性。那么如何让网页更加动态呢？这里我们介绍一下如何使用CSS让某个控制跟着鼠标移动。

.tip {
	position: fixed;
	top: 0;
	left: 0;
	transform: translate(-50%,-50%);
	background-color: #fff;
	padding: 10px;
	border-radius: 5px;
	Box-shadow: 0 0 5px #999;
	transition: all .3s;
}
.tip:hover {
	Box-shadow: 0 0 10px #333;
}

上面的代码中，我们定义了一个名为tip的控制，设置它的position为fixed，这样可以让控制在网页中固定在一个位置。然后我们定义了top和left为0，这样控制就在网页的左上角了。接着，我们再使用transform将控制移动到中心点，并设置背景色、内边距、边框圆角、阴影等样式。最后定义了一个hover的样式，当鼠标悬停在控制上时，阴影会变大。

那么如何让这个控制跟着鼠标移动呢？我们可以使用JavaScript的MouseEvent事件，在鼠标移动时获取鼠标的坐标，再设置控制的位置。

var tip = document.querySelector('.tip');
document.addEventListener('mousemove',function (e) {
	var x = e.clientX;
	var y = e.clientY;
	tip.style.left = x + 'px';
	tip.style.top = y + 'px';
});

代码中我们使用了querySelector获取tip控制，然后监听了mousemove事件，当鼠标移动时获取到鼠标的坐标，再设置tip控制的位置。这样就能实现控制跟着鼠标移动的效果了。

总结一下，在CSS中通过设置固定位置、样式以及动态效果等限制了控制的外观和表现，而在JavaScript中使用MouseEvent事件获取鼠标的坐标并控制位置，这样就实现了控制跟着鼠标移动的功能。