纯 CSS 也能判断鼠标移动方向，这也太不可思议了！

2023-11-03 10:24:53

没错，你没有听错，通过合理运用CSS，真的可以只用CSS来判断鼠标移动方向，这真是不可思议，让人眼前一亮。今天我就给大家介绍一个，大家可能闻所未闻的，纯 CSS判断鼠标移动方向的方法，让我们尽情领略CSS的魅力。

纯CSS判断鼠标移动方向的方法

1. 鼠标移动方向：准备工作

首先，我们需要创建一个HTML元素，并为其添加一个事件监听器，以便在鼠标进入或离开该元素时触发一个函数。然后，我们需要创建一个CSS动画，并在鼠标进入或离开该元素时播放此动画。

<div id="element">
  鼠标移动方向
</div>

#element {
  width: 200px;
  height: 200px;
  background-color: red;
}

#element:hover {
  animation: mymove 1s infinite;
}

@keyframes mymove {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(200px);
  }
}

2. 鼠标移动方向：实现原理

当鼠标进入元素时，#element:hover选择器将被激活，并且mymove动画将开始播放。此动画将使元素从左到右移动200px。当鼠标离开元素时，#element:hover选择器将被取消激活，并且mymove动画将停止播放。元素将返回其原始位置。

鼠标移动方向：实例展示

通过这个方法，我们可以创建出各种炫酷的鼠标悬停效果、滑块等元素。下面是一个实例展示：

<div class="container">
  <div class="box"></div>
</div>

.container {
  width: 500px;
  height: 500px;
  background-color: #eee;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box:hover {
  animation: mymove 1s infinite;
}

@keyframes mymove {
  0% {
    transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(0%, -50%);
  }
  50% {
    transform: translate(0%, 0%);
  }
  75% {
    transform: translate(-50%, 0%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}