CSS实现放大缩小关闭按钮(实例代码)
(编辑：jimmy 日期: 2024/10/31 浏览：2)
这种效果最常见是在我们的浏览器页面上，先给大家展示效果图：
如上图所示，使用CSS 绘制上述三个按钮：
<template>
<div class="windowAction">
<button class="min">缩小</button>
<button class="fullpage">放大</button>
<button class="close">关闭</button>
</div>
</template>
<script>
export default {
data() {
return {
flag_fullpageWebView: 1
};
}
};
</script>
<style lang="scss" scoped>
.windowAction {
margin-top: -5px;
-webkit-app-region: no-drag;
min-width: 70px;
text-align: right;
button {
&:hover {
color: #a8aabd;
}
}
.min {
width: 14px;
height: 14px;
background-color: transparent;
font-size: 0;
margin-right: 18px;
position: relative;
color: #878896;
&:after {
content: "";
width: 100%;
position: absolute;
left: 0;
bottom: 0;
border-bottom: 2px solid;
}
}
.fullpage {
width: 16px;
height: 16px;
color: #878896;
border: 2px solid;
background-color: transparent;
font-size: 0;
margin-right: 18px;
}
.close {
width: 18px;
height: 18px;
font-size: 0;
background-color: transparent;
position: relative;
color: #878896;
transform: rotate(45deg) translate(-2px, 2px);
&:before,
&:after {
content: "";
position: absolute;
}
&:before {
width: 100%;
left: 0;
top: 50%;
transform: translateY(-50%);
border-top: 2px solid;
}
&:after {
height: 100%;
left: 50%;
top: 0;
transform: translateX(-50%);
border-left: 2px solid;
}
}
}
</style>
总结
以上所述是小编给大家介绍的CSS实现放大缩小关闭按钮，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！