css实现玻璃态Claymorphism键盘效果代码-html代码-BFW代码库

css实现玻璃态Claymorphism键盘效果代码

代码语言：html

代码描述：css实现玻璃态Claymorphism键盘效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
    .clay{background:var(--clay-background,rgba(0,0,0,.005));border-radius:var(--clay-border-radius,32px);box-shadow:var(--clay-shadow-outset,8px 8px 16px 0 rgba(0,0,0,.25)),inset var(--clay-shadow-inset-primary,-8px -8px 16px 0 rgba(0,0,0,.25)),inset var(--clay-shadow-inset-secondary,8px 8px 16px 0 hsla(0,0%,100%,.2))}
/*# sourceMappingURL=clay.css.map */
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;600&display=swap');
        body{
          background:#FAFAFA;
          overflow:hidden;
          height:100vh;
          font-family: 'Montserrat', sans-serif;
          font-weight:600;
          display: flex;
          flex-direction:column; 
          justify-content:flex-end;
          align-items:center;
        }
        
        .keyboard{
          width: 850px;
          position: absolute;
          left: 50%;
          top:50%;
          transform: translate(-50%,-50%);
        }
        .row{
          padding:0;
          list-style-type:none;
          display:flex;
          justify-content: space-evenly;
        }
        
        .row div{
          display: flex;
        }
        .key{
          display:flex;
          justify-content:center;
          align-items:center;
          width:50px;
          height:50px;
          --clay-background:#ebebeb;
          --clay-border-radius: 15px;
         }
        .key:hover{
          cursor:pointer;
          transition:0.3s;
          --clay-shadow-inset-primary: 0 0 5px 5px #d3d3d3;
        }
        
        #esc{
          width: 35px;
          --clay-border-radius:10px;
          background: palegreen;
          --clay-background:palegreen;
        }
        #esc:hover{
            --clay-shadow-inset-primary: 0 0 5px 5px	lightgreen;
        }
        #del{
          width: 75px;
          background: #AFEEEE;
          --clay-background:#AFEEEE;
        }
        #del:hover{
          --clay-shadow-inset-primary: 0 0 5px 5px 	#B0E0E6;
        }
        #tab{
          width:70px;
          background: #FF7F50;
          --clay-background:#FF7F50
        }
        #tab:hover{
         --clay-shadow-inset-primary: 0 0 5px 5px	indianred;
        }
        #caps{
          width: 80px;
          --clay-background: #00dbff;
        }
        #caps:hover{
           --clay-shadow-inset-primary: 0 0 5px 5px	#10A5F5;
        }
        #enter{
          width: 80px;
          --clay-background: 	#40E0D0;
        }
        #enter:hover{
          --clay-shadow-inset-primary: 0 0 5px 5px		#00CED1;
        }
        #slash{
          width: 60px;
        }
        #shift{
          width:110px;
          --clay-background: 	#6495ED;
        }
        #shift:hover{
          --clay-shadow-inset-primary: 0 0 5px 5px #527fd1;
        }
        #shift2{
          width:70px;
          --clay-background: #87CEFA;
        }
        #shift2:hover{
            --clay-shadow-inset-primary: 0 0 5px 5px #79bde8;
        }
        #ctrl{
          --clay-background:#DC143C;
        }
        #ctrl:hover{
          --clay-shadow-inset-primary: 0 0 5px 5px #ba1133;
        }
        #fn{
          --clay-background: orange;
        }
        #fn:hover{
          --clay-shadow-inset-primary: 0 0 5px 5px darkorange;
        }
        #win{
          --clay-background: mediumpurple;
        }
        #win:hover{
         --clay-shadow-inset-primary: 0 0 5px 5px slateblue;
        }
        #alt{
          --clay-background: #778899;
        }
        #alt:hover{
           --clay-shadow-inset-primary: 0 0 5px 5px 	#708090;
        }
        #space{
          width: 300px;
          --clay-background: url("//repo.bfw.wiki/bfwrepo/image/611da9b999795.png");
          background-size: cover;
          filter: brightness(200%);
        }
        #space:hover{
          filter: brightness(80%);
        }
        #altgr{
          --clay-background: lightgray;
        }
        #altgr:hover{
          --clay-shadow-inset-primary: 0 0 5px 5px silver;
        }
        #menu{
          --clay-background: red;
        }
        #menu:hover{
            --clay-shadow-inset-primary: 0 0 5px 5px #d90000;
        }
        #ctrl2{
          --clay-background: chocolate;
        }
        #ctrl2:hover{
          --clay-shadow-inset-primary: 0 0 5px 5px sienna;
        }
        
        footer{
          font-size: 12px;
          color: silver;
          margin-bottom:1rem;
        }
        
        footer a{
          text-decoration:none;
          font-style: italic;
          color: paleviolet;
        }
    </style>


</head&.........完整代码请登录后点击上方下载按钮下载查看