文字根据鼠标位置往相反方向移动

这个效果可以通过CSS中的transform和translate属性来实现。具体实现步骤如下：

1.首先创建一个容器元素，用于包含需要反向移动的文字。

2.在容器元素中创建一个内部元素，用于显示需要反向移动的文字。

3.通过CSS设置容器元素的position为relative，内部元素的position为absolute。

4.使用translateX和translateY属性设置内部元素的初始位置。

5.使用:hover伪类选择器和transform:translate()属性结合，实现鼠标悬浮时内部元素相反方向移动的效果。

具体的CSS代码如下所示：

.container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container:hover .text {
  transform: translate(-100%, -100%);
}

在上述代码中，容器元素的宽度和高度都设置为200px，边框为1px实线边框。内部元素的位置使用了transform属性，将其水平和垂直方向上的位置都调整到50%。当鼠标悬浮在容器元素上时，内部元素的位置通过transform:translate()属性实现相反方向移动的效果。