css实现玻璃拟态弹出层弹出窗效果代码-html代码-BFW代码库

css实现玻璃拟态弹出层弹出窗效果代码

代码语言：html

所属分类：弹出层

代码描述：css实现玻璃拟态弹出层弹出窗效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        /*CodingMaker_*/
        @import url('https://fonts.googleapis.com/css2?family=Cookie&family=Poppins&family=Roboto:wght@300&display=swap');
        * {
            margin:0px;
            padding:0px;
            box-sizing:border-box;
          }
          body {
            font-family:"Roboto",sans-serif;
            background:#111;
          }
          body:before,
          body:after {
            content:"";
            position:fixed;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
          }
          body:before {
            background:linear-gradient(#e91e56,#ffc107);
            clip-path:circle(25% at 30% 20%);
          }
          body:after {
            background:linear-gradient(#fff,#1970ca);
            clip-path:circle(25% at 70% 90%);
          }
          .popup {
            position:fixed;
            top:-150%;
            left:50%;
            transform:translate(-50%,-50%) scale(1.2);
            opacity:0;
            background:rgba(255,255,255,0.2);
            border:1px solid rgba(255,255,255,0.15);
            box-shadow:inset 0px 0px 20px 5px rgba(255,255,255,0.05);
            backdrop-filter:blur(8px);
            -webkit-backdrop-filter:blur(8px);
            width:450px;
            padding:20px 30px;
            border-radius:10px;
            z-index:1000;
            transition:top 0ms ease-in-out 300ms,
                       opacity 300ms ease-in-out 0ms,
                       transform 300ms ease-in-out 0ms;
          }
          .popup.active {
            top:50%;
            transform:translate(-50%,-50%) scale(1);
            opacity:1;
            transition:top 0ms ease-in-out 0ms,
                       opacity 300ms ease-in-out 0ms,
                       transform 300ms ease-in-out 0ms;
          }
          .popup .close-btn {
            position:absolute;
            top:10px;
            right:10px;
.........完整代码请登录后点击上方下载按钮下载查看