CSS简单实现弹出框、输入框等的背景幕布,模仿苹果官网导航块的半透明效果。
码农天地 -需求提要
我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:
弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击、focus等。为了更好突出弹出框的效果,除了弹出框以外的部分,我们可以加上一个幕布(英文为backdrop)效果,让背景的元素模糊、半透明、变暗等等,让用户的注意力能够完全集中在弹出框之中。弹出前:
弹出后:
思路清晰之后,剩下的就是简单的代码实现了,所有效果都很简单,只要根据我们上面分析的设计来写就OK了。
HTML<main>
<div ><button id="close">close</button></div>
<div ></div>
<button >show</button>
</main>
JSvar button = document.getElementsByTagName("button")[0];
button.addEventListener("click", function() {
// show the modal
var ele = document.getElementsByClassName("modal")[0];
ele.style.visibility = `visible`;
ele.style.opacity = `1`;
// show backdrop effect
var backdrop = document.getElementsByClassName("backdrop")[0];
backdrop.style.opacity=`1`;
backdrop.style.visibility=`visible`;
})
var close = document.getElementById('close').addEventListener("click", function(event) {
// close modal
event.target.parentNode.style.visibility=`hidden`;
event.target.parentNode.style.opacity = `0`;
// close backdrop effect
var backdrop = document.getElementsByClassName("backdrop")[0];
backdrop.style.opacity=`0`;
backdrop.style.visibility=`hidden`;
})
我们的幕布效果最重要的是在CSS里面的设定,大家可以稍微仔细看一下。
CSSbody {
background-color: #f4ebc1;
}
main {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.backdrop{
width:100%;
height:100%;
visibility: hidden;
opacity: 0;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background: rgba(8, 7, 7, 0.6);
z-index: 100;
transition: all .2s ease;
backdrop-filter: saturate(180%) blur(1px);
}
.backcontent{
position: absolute;
top: 70vh;
width: 80px;
height: 30px;
background: white;
text-align: center;
line-height: 28px;
border: 1px solid black;
box-shadow: 0 0 3px #0070D2;
border-radius: 30px;
opacity:.85;
outline: none;
}
.modal {
position: absolute;
left: 50xw;
top: 30vh;
width: 300px;
height: 150px;
visibility: hidden;
opacity: 0;
background-color: white;
border-radius: 5px;
border: 1px solid black;
transition: all .2s ease;
display: flex;
justify-content: center;
align-items: flex-end;
z-index: 9001;
}
#close {
width: 80px;
height: 30px;
background: white;
text-align: center;
line-height: 28px;
border: 1px solid black;
box-shadow: 0 0 3px #0070D2;
border-radius: 30px;
opacity:.85;
outline: none;
margin-bottom: 1rem;
}
苹果官网导航栏效果苹果官网的导航栏的半透明效果,主要是由下面这行样式实现的。
backdrop-filter: saturate(180%) blur(1px);
例图:注意导航栏的半透明、模糊效果
backdrop-filter
主要是控制被元素覆盖住的元素的效果,注意,要看到这个样式带来的效果,覆盖的元素必须有一定的半透明度(这样才能看到下面一层的效果)。
供参考:
有关backdrop-filter
的MDN文档Codepen上这个Demo的代码与效果 特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。
上一篇: 个人常用的vs-code插件