交互效果地址：https://scrimba.com/c/cEwREJs6
HTML代码：
<nav> ???<ul> ???????<li><span>Home</span></li> ???</ul></nav>
CSS代码：
html, body { ???margin: 0; ???padding: 0; ???width: 100%; ???height: 100%; ???display: flex; ???justify-content: center; ???align-items: center; ???background: linear-gradient(to right bottom,gold, chocolate);}/* 为容器设置宽高，此处定义的变量 x 和 y 后面还会用到 */:root{ ???--x: 5em; ???--y: 1.5em;}nav ul{ ???padding: 0;}nav ul li{ ???position: relative; ???width: var(--x); ???height: var(--y); ???margin: 0.5em; ???line-height: var(--y); ???list-style-type: none; ???font-size: 40px; ???text-align: center; ???font-family: sans-serif; ???background-color: white; ???border: 2px solid black; ???letter-spacing: 0.1em; ???/* overflow: hidden; */}/* 用伪元素画出一个小球，放到菜单项左端 */nav ul li::before{ ???position: absolute; ???content: ‘‘; ???width: 0; ???height: var(--y); ???background-color: black; ???top: 0; ???left: 0; ???transition: 0.5s ease-out;}/* 用 mix-blend-mode 设置色彩混合模式，使小球覆盖的文字反色显示 */nav ul li span{ ???color: white; ???mix-blend-mode: difference;}nav ul li:hover::before{ ???width: var(--x);}23.1纯 CSS 创作一个菜单反色填充特效
原文地址：https://www.cnblogs.com/FlyingLiao/p/10281545.html