.new_ul { border-radius: 0 0 8px 8px; position: relative; &:hover { &::before { content: ''; position: absolute; z-index: 3; left: 0; bottom: 0; background-color: #2280fb; width: 100%; height: 100%; } } li { position: relative; z-index: 4; } &::before { content: ''; position: absolute; z-index: 3; left: 0; bottom: 0; background-color: #2280fb; width: 0%; height: 0%; } }给这段代码添加贼牛逼的动画

可以使用CSS动画和keyframes来为这段代码添加一个很酷的动画效果。以下是一个示例：

.new_ul {
  border-radius: 0 0 8px 8px;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 0;
    background-color: #2280fb;
    width: 0%;
    height: 0%;
    transition: all 0.3s ease-in-out;
  }
  &:hover {
    &::before {
      animation: expand 1s ease-in-out forwards;
    }
  }
  li {
    position: relative;
    z-index: 4;
  }
}

@keyframes expand {
  0% {
    width: 0%;
    height: 0%;
  }
  50% {
    width: 100%;
    height: 0%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

在这个示例中，我们定义了一个名为`expand`的keyframes动画，用于控制伪元素的宽度和高度。当鼠标悬停在列表容器上时，我们将此动画应用于伪元素，从而创建一个很酷的效果，它会从一个点迅速扩展到整个容器。同时，我们还将`transition`属性从伪元素中移除，因为我们不再需要它。

你可以根据自己的需要调整动画的持续时间、缓动函数和关键帧百分比，以创建自己想要的效果。