css实现玻璃态Claymorphism键盘效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现玻璃态Claymorphism键盘效果代码
代码标签: 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;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0