如何实现类似clay.global网站底部的粉色半背景hover悬停样式？

云上老周

2026-9-28

实现原理

该效果通过CSS背景渐变配合过渡动画实现，不会修改文字本身样式，仅在文字下方添加半高衬底：

给链接元素设置粉色线性渐变作为背景
默认状态下背景高度为0，定位在元素底部，处于不可见状态
hover时调整背景高度到预设值，配合过渡实现平滑出现的效果

代码示例

参考HTML结构

<footer>
  <a href="#" class="footer-item">服务条款</a>
  <a href="#" class="footer-item">隐私政策</a>
  <a href="#" class="footer-item">联系我们</a>
  <a href="#" class="footer-item">工作机会</a>
</footer>

核心CSS代码

.footer-item {
  /* 基础样式可根据自身项目调整 */
  display: inline-block;
  color: #222;
  text-decoration: none;
  padding: 3px 0;
  line-height: 1.5;
  /* 效果核心配置 */
  background-image: linear-gradient(#f5a9b8, #f5a9b8);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0;
  transition: background-size 0.25s ease;
}

.footer-item:hover {
  /* 50%即为半高效果，可按需调整高度 */
  background-size: 100% 50%;
}