<nav> <ul> <li><a href="https://www.duidaima.com">堆代码</a></li> <li><a href="https://www.duidaima.com/Book/Library">书架</a></li> <li><a href="https://www.duidaima.com/Group/Category/JAVA">JAVA编程</a></li> <li><a href="https://www.duidaima.com/Group/Category/ArchitecturedDesign">架构设计</a></li> </ul> </nav> <style> nav { width: 100%; height: 50px; background-color: #333; } ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; height: 100%; } li { position: relative; z-index: 1; } a { color: #fff; text-decoration: none; padding: 10px; } a::before { content: ''; position: absolute; top: -5px; bottom: -5px; left: -5px; right: -5px; z-index: -1; background-color: #fff; transform: skew(-10deg); } </style>这里给每个导航菜单项的链接添加了一个伪元素:before,通过设置其背景色和transform属性,实现了菜单项之间的镂空效果。
<div class="card"> <h3>Card Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <style> .card { width: 300px; height: 200px; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,.2); position: relative; } .card::before { content: ''; position: absolute; top: -15px; left: -15px; bottom: -15px; right: -15px; z-index: -1; border: 2px solid #f00; transform: skew(-10deg); } </style>
这里通过给卡片元素添加一个伪元素:before,通过设置其border属性和transform属性,实现了卡片边框的镂空效果。
<h1 class="hollow">Hollow Text</h1> <style> .hollow { font-size: 80px; font-weight: bold; color: transparent; text-shadow: 0 0 10px rgba(0,0,0,.2); } </style>这里给文本设置了一个高斯模糊的文本阴影,并将文本颜色设置为透明,从而实现了镂空文本的效果。
<div class="shape"></div> <style> .shape { width: 200px; height: 200px; background-color: #f00; position: relative; } .shape::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: screen; background: url('path/to/svg') no-repeat center center / contain; } </style>这里给元素添加一个伪元素:before,通过设置其mix-blend-mode属性和背景图像,实现了元素的复杂形状镂空效果。
<button class="hollow">Click Me</button> <style> .hollow { padding: 10px 20px; color: #fff; background-color: transparent; border: 2px solid #fff; font-size: 18px; font-weight: bold; position: relative; overflow: hidden; cursor: pointer; } .hollow::before { content: ''; position: absolute; top: -50%; left: -50%; bottom: -50%; right: -50%; z-index: -1; background-color: #fff; transform: scale(0); transition: transform .5s ease-in-out; } .hollow:hover::before { transform: scale(1.5); } </style>这里给按钮元素添加一个伪元素:before,通过设置其缩放属性,实现了按钮的镂空动画效果。