div+css实现立体键盘效果代码
代码语言：html
所属分类：布局界面
代码描述：div+css实现立体键盘效果代码
下面为部分代码预览，完整代码请点击下载或在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))
}
@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:.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:#789}#alt:hover{--clay-shadow-inset-primary:0 0 5px 5px #708090}#space{width:300px;--clay-background:url("//repo.bfw.wiki/bfwrepo/image/6345f23a37fe3.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>
<body>
<div class="keyboard">
<ul class="row">
<li class="key clay" id="esc">☘️</li>
<li class="key clay">1</li>
<li class="key clay">2</li>
<li class="key clay">3</li>
<li class="key clay">4</li>
<li class="key clay">5</li>
<li class="key clay">6</li>
<li class="key clay">7</li>
<li class="key clay">8</li>
<li class="key clay">9</li>
<li class="key clay">0</li>
<li class="key clay">_</li>
<li class="key clay".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0