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;
     .........完整代码请登录后点击上方下载按钮下载查看