夜雨聆风
css立体感键盘按钮样式!!附源码!!!
效果展示
完整源码
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>css立体感键盘按钮样式</title><linkrel='stylesheet'href='clay.css'><linkrel="stylesheet"href="./style.css"></head><body><!-- partial:index.partial.html --><divclass="keyboard"><ulclass="row"><liclass="key clay"id="esc">☘️</li><liclass="key clay">1</li><liclass="key clay">2</li><liclass="key clay">3</li><liclass="key clay">4</li><liclass="key clay">5</li><liclass="key clay">6</li><liclass="key clay">7</li><liclass="key clay">8</li><liclass="key clay">9</li><liclass="key clay">0</li><liclass="key clay">_</li><liclass="key clay">=</li><liclass="key clay"id="del">🗑️</li></ul><ulclass="row"><liclass="key clay"id="tab">🦃</li><liclass="key clay">Q</li><liclass="key clay">W</li><liclass="key clay">E</li><liclass="key clay">R</li><liclass="key clay">T</li><liclass="key clay">Y</li><liclass="key clay">U</li><liclass="key clay">I</li><liclass="key clay">O</li><liclass="key clay">P</li><liclass="key clay">{</li><liclass="key clay">}</li><liclass="key clay"id="slash">\</li></ul><ulclass="row"><liclass="key clay"id="caps">🎓</li><liclass="key clay">A</li><liclass="key clay">S</li><liclass="key clay">D</li><liclass="key clay">F</li><liclass="key clay">G</li><liclass="key clay">H</li><liclass="key clay">J</li><liclass="key clay">K</li><liclass="key clay">L</li><liclass="key clay">;</li><liclass="key clay">"</li><liclass="key clay"id="enter">🦘</li></ul><ulclass="row"><liclass="key clay"id="shift">🛹</li><liclass="key clay">Z</li><liclass="key clay">X</li><liclass="key clay">C</li><liclass="key clay">V</li><liclass="key clay">B</li><liclass="key clay">N</li><liclass="key clay">M</li><liclass="key clay">,</li><liclass="key clay">.</li><liclass="key clay">?</li><liclass="key clay"id="shift2">⛸️</li><liclass="key clay"id="up-arrow">☝️</li></ul><ulclass="row"><liclass="key clay"id="ctrl">🕹️</li><liclass="key clay"id="fn">🎪</li><liclass="key clay"id="win">🌏</li><liclass="key clay"id="alt">🦇</li><liclass="key clay"id="space"></li><liclass="key clay"id="altgr">⛓</li><liclass="key clay"id="menu">🌶️</li><liclass="key clay"id="ctrl2">🐪</li><liclass="key clay"id="left-arrow">👈🏿</li><liclass="key clay"id="down-arrow">👇🏻</li></ul></div></body></html>
@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("https://i.ibb.co/9qLH1SB/constellation-pattern.jpg");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;}
.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 */
