今天我们要学习的是CSS盒子到处跑。
.box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
.box:hover{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
以上是一个简单的CSS代码，其中.box是一个红色的正方形盒子，有宽高为100px，而且使用了绝对定位（position:absolute）。那接下来的.box:hover部分是什么意思呢？
这就是鼠标悬停效果，当鼠标放到盒子上时，会触发:hover伪类，这里我们写了left:50%;和top:50%;意思是把盒子居中到页面上。而translate(-50%,-50%)是CSS里的平移属性，可以把元素移动到自身宽高的一半处。
这样一来，我们的盒子就可以随着鼠标到处跑了。这个技术在实际开发中非常有用，比如可以用来增加页面的趣味性，提升用户体验。
好了，以上就是CSS盒子到处跑的简单介绍了。快去试试吧！
