23.1纯 CSS 创作一个菜单反色填充特效
Posted 人生与戏
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了23.1纯 CSS 创作一个菜单反色填充特效相关的知识,希望对你有一定的参考价值。
交互效果地址: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 创作一个菜单反色填充特效的主要内容,如果未能解决你的问题,请参考以下文章
前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效