css实现粘土态玻璃态布局设计新趋势代码-html代码-BFW代码库

css实现粘土态玻璃态布局设计新趋势代码

代码语言：html

代码描述：css实现粘土态玻璃态布局设计新趋势代码，2022年的新设计趋势。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">



    <style>
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }
        
        body,
        html {
          font-family: "Poppins", sans-serif;
          -webkit-text-size-adjust: 100%;
          -webkit-tap-highlight-color: transparent;
          -webkit-font-smoothing: antialiased;
          text-rendering: optimizeLegibility;
          font-size: 12pt;
          font-weight: 400;
          color: black;
        }
        
        body {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100vh;
          overflow: hidden;
          background: MediumOrchid;
          margin: 0;
          padding: 0;
        }
        
        div {
          position: relative;
          display: flex;
          flex-direction: row;
          align-items: flex-end;
          justify-content: center;
          min-width: 400px;
          min-height: 250px;
          max-width: 400px;
          max-height: 250px;
          background: linear-gradient(
            35deg,
            white 0%,
            white 84.7%,
            MediumOrchid 85%,
            MediumOrchid 91%,
            white 91.3%
          );
          box-shadow: 0 10px 60px 0 DarkViolet, inset 0px -10px 17px 2px MediumOrchid;
          border-radius: 25px;
          z-index: -1;
        }
        
        div::before {
          position: absolute;
          backdrop-filter: blur(5px);
          bottom: -20px;
          right: -20px;
          width: 70px;
          height: 70px;
          content: "";
          border-radius: 200px;
          background: #ffffff66;
          box-shadow: 0 10px 25px 0 DarkViolet, inset 0px -8px 15px 0px Purple;
          border: 0.1px solid transparent;
        }
        
        p {
          position: relative;
          right: 5px;
          font-size: 34pt;
          font-weight: 900;
          margin: 0;
          padding: 20px 35px 10px 25px;
          line-height: 36pt;
          text-align: center;
          color:.........完整代码请登录后点击上方下载按钮下载查看