标签:div flex 交互效果 com lis 100% aci text absolute
交互效果地址: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); }
标签:div flex 交互效果 com lis 100% aci text absolute
原文地址:https://www.cnblogs.com/FlyingLiao/p/10281545.html