能否通过CSS实现鼠标悬停元素时的曲线效果？

你已经搞定了基础的悬停背景变色，在此基础上，咱们可以通过几种CSS小技巧来添加曲线特效，下面给你几个实用的实现方案：

方法1：伪元素+border-radius实现曲线滑入效果 #

这种方式能做出从侧边延伸的曲线背景，过渡感很自然：

.Exp {
  font-size: 50px;
  text-align: center;
  position: relative;
  display: inline-block;
  padding: 0.5rem 2rem;
  z-index: 1;
  transition: color 0.3s ease;
}

.Exp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: brown;
  border-radius: 0 50% 50% 0; /* 右上角+右下角圆角，形成右侧曲线 */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
  z-index: -1;
}

.Exp:hover {
  color: white;
}

.Exp:hover::before {
  transform: scaleX(1);
}

<div class="Exp">Blog</div>

这里用伪元素创建了一个带圆角的背景层，默认完全收缩，悬停时从右侧展开形成曲线滑入效果。你可以修改border-radius的值调整曲线弧度，比如改成50% 0 0 50%就能让曲线从左侧滑入。

方法2：clip-path实现自定义复杂曲线 #

如果想要更独特的曲线形状，clip-path可以帮你定义任意裁剪路径：

.Exp {
  font-size: 50px;
  text-align: center;
  position: relative;
  display: inline-block;
  padding: 0.5rem 2rem;
  color: black;
  transition: color 0.3s ease;
}

.Exp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: brown;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%); /* 右下角裁剪出弧形 */
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: -1;
}

.Exp:hover {
  color: white;
}

.Exp:hover::before {
  transform: translateY(0);
}

你可以通过调整clip-path的坐标点，甚至用贝塞尔曲线来做出更流畅的自定义曲线。

方法3：简单的圆角过渡效果 #

如果只需要元素本身边角变成曲线，直接给元素加border-radius和过渡就行，最省心：

.Exp {
  font-size: 50px;
  text-align: center;
  padding: 0.5rem 2rem;
  border-radius: 0;
  transition: all 0.3s ease;
}

.Exp:hover {
  background: brown;
  color: white;
  border-radius: 30px; /* 调整数值改变圆角大小 */
}

这种方式适合需要整体圆角的场景，代码简单易维护。

总的来说，CSS的伪元素、过渡属性、border-radius和clip-path都是实现曲线悬停效果的好工具，你可以根据想要的视觉风格选合适的方法，还能调整过渡时长、曲线弧度来适配你的设计~

内容的提问来源于stack exchange，提问作者Muzamil