下面是“用纯CSS实现镂空效果的示例代码”的完整攻略。
什么是镂空效果?
镂空效果即在元素中间空缺一块区域,使其呈现“空心”的效果。通常应用于图标、按钮等设计元素中。
实现方法
实现镂空效果有多种方法,其中一种是使用CSS的:before
和:after
伪元素,再设置背景为透明,并在伪元素上覆盖一个实心的图形,就可以让原始元素呈现空心状态。
示例1:矩形按钮的镂空效果
HTML代码:
<button class="hollow-btn">Click me</button>
CSS代码:
.hollow-btn {
position: relative;
padding: 10px 20px;
border: none;
background: transparent;
text-transform: uppercase;
}
.hollow-btn:before {
content: "";
position: absolute;
top: -3px;
left: -3px;
height: calc(100% + 6px);
width: calc(100% + 6px);
background: #fff;
z-index: -1;
}
.hollow-btn:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #fff;
z-index: -1;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease-out;
}
.hollow-btn:hover:after {
transform: scaleX(1);
transform-origin: left;
}
该代码实现了一个矩形按钮的镂空效果,当鼠标悬停在按钮上时,原先空心状态的按钮会填充变成实心状态。
示例2:圆形图标的镂空效果
HTML代码:
<a class="hollow-icon" href="#"></a>
CSS代码:
.hollow-icon {
position: relative;
display: inline-block;
height: 40px;
width: 40px;
border-radius: 100%;
background: transparent;
}
.hollow-icon:before {
content: "";
position: absolute;
top: -3px;
left: -3px;
height: calc(100% + 6px);
width: calc(100% + 6px);
border-radius: 100%;
border: 2px solid #fff;
z-index: -1;
}
.hollow-icon:after {
content: "";
position: absolute;
top: 5px;
left: 5px;
height: calc(100% - 10px);
width: calc(100% - 10px);
border-radius: 100%;
border: 2px solid #fff;
z-index: -1;
transition: border-color 0.3s ease-out;
}
.hollow-icon:hover:after {
border-color: red;
}
该代码实现了一个圆形图标的镂空效果,当鼠标悬停在图标上时,原先空心状态的图标会被一个红色的实心圆覆盖。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:用纯CSS实现镂空效果的示例代码 - Python技术站