原文地址：https://segmentfault.com/a/1190000014876348
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); ???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; ???overflow: hidden;}/* 用伪元素画出一个小球，放到菜单项左端 */nav ul li::before { ???content: ‘‘; ???position: absolute; ???height: var(--y); ???width: var(--y); ???background-color: black; ???border-radius: 50%; ???top: 0; ???left: calc(-1 * var(--y) / 2); ???transition: 0.5s ease-out;}/* 用 mix-blend-mode 设置色彩混合模式，使小球覆盖的文字反色显示 */nav ul li span{ ???color: white; ???mix-blend-mode: difference;}/* 增加动画，使小球从左侧滚到右侧 */nav ul li:hover::before { ???--r: calc(var(--x) * 1.2); ???height: var(--r); ???width: var(--r); ???/* 利用圆的变大覆盖长方形，可以将li中 overflow: hidden; 注释查看 */ ???top: calc(-1 * var(--r) / 2 + var(--y) / 2); ???left: calc(-1 * var(--r) / 2 + var(--x) / 2);}23.纯 CSS 创作一个菜单反色填充特效
原文地址：https://www.cnblogs.com/FlyingLiao/p/10281524.html