Neumorphism新拟态设计表单组件效果代码-html代码-BFW代码库

代码语言：html
代码描述：Neumorphism新拟态设计表单组件效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.11.2.css">


    <style>
        @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
        @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap");
        
        html {
          font-size: 62.5%;
        }
        
        body {
          background: #ebecf0;
          font-family: "Roboto", sans-serif;
          position: relative;
          padding: 6rem;
          min-height: 100vh;
          font-size: 14px;
          font-weight: 400;
        }
        
        i {
          font-size: 1.4rem;
        }
        
        .grid {
          margin: 0 auto;
          margin-top: 2rem;
          max-width: 300px;
          min-width: 250px;
          display: grid;
          grid-gap: 2rem;
          grid-template-rows: repeat(13, 1fr);
          grid-template-columns: repeat(4, 1fr);
          grid-template-areas: "log log bti1 bti2" "log log btr1 btr2" "bs1 bs1 swio swio" "bs2 bs2 swia swia" "bt1 bt1 bt1 bt1" "bt2 bt2 bt2 bt2" "bt3 bt3 bt3 bt3" "bt4 bt4 bt4 bt4" "sea sea sea sea" "char char char char" "char char char char" "char char char char";
        }
        @media only screen and (min-width: 400px) {
          .grid {
            grid-gap: 2.5rem;
            max-width: 650px;
            min-width: 500px;
            grid-template-rows: repeat(6, 1fr);
            grid-template-columns: repeat(8, minmax(min-content, 1fr));
            grid-template-areas: "log log bt3 bt3 hey1 bti1 bti2 swio" "log log bt2 bt2 bt2 btr1 btr2 swia" "bs1 bs1 bt2 bt2 bt2 char char char" "bs2 bs2 bt4 hi1 hi2 char char char" "sea sea sea sea sea char char char";
          }
          .grid > * {
            display: flex;
            justify-content: center;
            min-width: 4rem;
            min-height: 4rem;
          }
          .grid > * > * {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-around;
          }
          .grid .logo {
            grid-area: log;
            justify-content: left;
          }
          .grid .btn-off {
            grid-area: hey1;
          }
        
          .grid .btn-act {
            grid-area: bt2;
          }
          .grid .btn-i-1 {
            grid-area: bti1;
            justify-content: right;
          }
          .grid .btn-i-2 {
            grid-area: bti2;
            justify-content: left;
          }
          .grid .btn-r-1 {
            grid-area: btr1;
            justify-content: right;
          }
          .grid .btn-r-2 {
            grid-area: btr2;
            justify-content: left;
          }
          .grid .switch-o {
            grid-area: swio;
          }
          .grid .switch-o > * {
            justify-content: center;
            align-items: center;
          }
          .grid .switch-a {
            grid-area: swia;
            justify-content: center;
            align-items: center;
          }
          .grid .btn-sm-1 {
            grid-area: bs1;
            justify-content: left;
          }
          .grid .btn-sm-2 {
            grid-area: bs2;
            justify-content: left;
          }
          .grid .btn-drop {
            grid-area: bt3;
          }
        
          .grid .btn-user {
            grid-area: bt4;
          }
        
          .grid .btn-user2 {
            grid-area: hi1;
          }
          .grid .btn-user3 {
            grid-area: hi2;
          }
        
          .grid .search {
            grid-area: sea;
          }
          .grid .search > * {
            justify-content: space-between;
          }
          .grid .chart {
            grid-area: char;
          }
          .grid .chart > * {
            align-content: flex-end;
          }
        }
        
        .btn-sm-1 .morph,
        .btn-sm-2 .morph {
          background-color: #ebecf0;
          text-shadow: 0.6px 0.6px 0 hsl(227deg 12% 5% / 50%);
          color: #f5f5f5;
          font-size: 13px;
          font-weight: 500;
          letter-spacing: 0.5px;
          background-image: linear-gradient(
            to right,
            #25aae1,
            #4481eb,
            #04befe,
            #3f86ed
          );
          box-shadow: 0.875px 0.875px 1.8px 0 rgb(0 0 0 / 30%),
            -0.75px -0.75px 1.5px 0 hsl(216deg 16% 94%),
            inset -0.5px -0.5px 1px 0 rgb(0 0 0 / 30%),
            inset 0.5px 0.5px 1px 0 hsl(220deg 23% 95%);
          border: none;
        }
        
        .btn-drop .morph {
          background: linear-gradient(145deg, hsl(228deg 10% 99%), hsl(228deg 14% 91%));
          box-shadow: 0.45px 1.5px 2px 0 rgb(0 0 0 / 10%),
            2px 2px 4px 0px rgb(0 0 0 / 24%), 0.75px 0.75px 0.5px 0 white inset;
          border: 1px solid #ebecf0;
          text-shadow: 0.6px 0.6px 0 #fff;
          color: #61677c;
        }
        
        .btn-user .morph,
        .btn-user2 .morph,
        .btn-user3 .morph {
          background: linear-gradient(145deg, hsl(228deg 10% 99%), hsl(228deg 14% 91%));
          box-shadow: inset 0.45px 1.5px 1.5px 0 rgb(0 0 0 / 12%),
            inset 0 1px 1px 0px rgb(0 0 0 / 24%), 0.75px 0.75px 0.5px 0 white;
          border: none;
          width: 5rem;
          height: 5rem;
        }
        
        button.btn.morph.active {
          text-align: left;
          display: inline-flex;
          justify-content: flex-start;
          align-items: flex-start;
          font-family: "Roboto";
          opacity: 0.85;
        }
        
        .btn-act {
          background: linear-gradient(0deg, hsl(228deg 14% 89%), #fff);
          border-radius: 20pt;
          box-shadow: inset 0.45px 1.5px 1.5px 0 rgb(0 0 0 / 12%),
            inset 0 1px 1px 0px rgb(0 0 0 / 24%), 0.75px 0.75px 0.5px 0 white !important;
        }
        
        .btn-act .morph {
          background: linear-gradient(0deg, hsl(228deg 14% 89%), #fff);
          border: none !important;
          width: 97.5%;
          height: 90%;
          margin: auto;
          box-shadow: none !important;
        }
        
        .btn-off {
          background: linear-gradient(0deg, hsl(228deg 14% 89%), #fff);
          border-radius: 20pt;
          box-shadow: 0.45px 1.5px 1.5px 0 rgb(0 0 0 / 12%),
            0 1px 1px 0px rgb(0 0 0 / 24%), inset 0.75px 0.75px 0.5px 0 white !important;
          height: 5rem;
          width: 5rem;
        }
        
        .btn-off .morph {
          background: linear-gradient(0deg, #fff, hsl(228deg 14% 89%));
          border: none !important;
          width: 88%;
          height: 88%;
          margin: auto;
          box-shadow: 0.875px 0.875px 1.8px 0 rgb(0 0 0 / 30%),
            -0.875px -0.875px 1.8px 0 rgb(255 255 255),
            inset -0.5px -0.5px 1px 0 rgb(0 0 0 / 30%),
            inset 0.5px 0.5px 1px 0 rgb(255 255 255) !important;
          text-shadow: 0.6px 0.6px 0 #fff;
          color: #61677c;
        }
        
        i.fas.fa-search::before {
          font-family: "Font Awesome 5 Free" !important;
          font-weight: 900 !important;
        }
        i.fas.fa-search {
          color: #60667b;
          text-shadow: 0.4px 0.4px 0.4px hsl(0deg 0% 0%);
          font-weight: 300;
          font-family: "Roboto";
        }
        
        .morph {
          border: 2px solid #ebecf0;
          background: linear-gradient(160deg, #f0f1f4 0%, #e4e6eb 100%);
          box-shadow: -3px -3px 6px 2px #ffffff, 5px 5px 8px 0px rgba(0, 0, 0, 0.17),
            1px 2px 2px 0px rgba(0, 0, 0, 0.1);
          transition: 0.1s;
        }
        .morph.active,
        .morph:focus {
          border: 2px solid #fafafa;
          outline: none;
          box-shadow: inset -3px -3px 5px 0px #ffffff, -1px -1px 4px 0px #ffffff,
            inset 5px 5px 10px 0px rgba(0, 0, 0, 0.12),
            inset 2px 2px 3px 0px rgba(0, 0, 0, 0.07),
            1px 2px 3px 0px rgba(0, 0, 0, 0.1);
        }
        .btn {
          padding: 1.5rem;
          border-radius: 5rem;
          text-align: center;
          justify-content: center;
        }
        
        i.fab.fa-twitter {
          color: #55acee;
        }
        
        i.fab.fa-facebook-f {
          color: #4267b2;
        }
        
        i.fab.fa-instagram {
          color: #dd2a7b;
        }
        
        .fa-map-marker-alt:before {
          content: "\f3c5";
          margin-right: 4pt;
          margin-left: -4pt;
        }
        
        .fa-share-alt:before {
          content: "\f1e0";
          margin-left: 4pt;
          margin-right: -4pt;
        }
        
        .logo {
          w.........完整代码请登录后点击上方下载按钮下载查看