CSS backdrop-filter 滤镜 毛玻璃效果

@TOCcss

css毛玻璃特效

先上效果图

请添加图片描述

HTML代码

<body>
	   <div class="header-box flex justify-between mt-20">
        <nav>
            <ul id="nav" class="flex justify-between header-left pl-20">
	            <li><a class="nav-active " href="./index.html">首页a>li>
	            <li><a class="header-tag" href="./index.html">待开发的功能a>li>
	            <li><a class="header-tag" href="./index.html">待开发的功能a>li>
	            <li><a class="header-tag" href="./index.html">待开发的功能a>li>
	            <li><a class="header-tag" href="./index.html">待开发的功能a>li>
	            <li><a class="header-tag" href="./index.html">待开发的功能a>li>
            ul>
        nav>
        <div class="header-right flex justify-between pr-20">
            <div class="flex search vertical-center relative">
                <input class="pl-20" value="" placeholder="请输入你想要搜索的内容">
                <div class="search-but absolute">
                    <span class="iconfont icon-sousuo" style="color: #000">span>
                div>
            div>
            <div class="flex login-box justify-between">
                <div class="pointer header-tag">登录div>
                <div class="pointer header-tag">注册div>
            div>
        div>
    div>
body>

css

body::after {
    display: block;
    content: '';
    background-image: url("../images/bj.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.4;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.header-box {
    min-width: 1200px;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 20px;
    animation: shadow 3s ease;
    animation-iteration-count: infinite;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);  /* css滤镜 */
}

你可能感兴趣的:(css,前端,css3)