css+div实现中性化键盘布局效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div实现中性化键盘布局效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.3.0.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Mynerve&family=Pacifico&family=Source+Sans+Pro&display=swap"); * { transition: all 0.3s ease-out; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; box-sizing: content-box; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } body, html { height: 100%; overflow: hidden; } body { background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%); display: flex; align-items: center; justify-content: center; width: 100vw; height: 100%; } #codepen { display: grid; grid-template-rows: 30cqh 60cqh; align-items: center; justify-content: center; font-family: "Source Sans Pro"; width: 90%; height: 100%; } #about { text-align: center; line-height: 10px; } #keyboard { display: grid; grid-template-rows: repeat(5, 5fr); grid-template-columns: repeat(16, 16fr); border-radius: 10px; border: 2px solid rgb(230, 230, 230, 0.3); padding: 1%; box-shadow: -4px -4px 18px rgb(255, 255, 255, 0.8), 4px 4px 22px rgb(0, 0, 0, 0.3), 0px 0px 18px rgb(150, 150, 150, 0.15) inset; } .key { grid-row: span 1; grid-column: span 1; } .key-sm { grid-row: span 1; grid-column: span 2; } .key-md { grid-row: span 1; grid-column: span 3; } .key-lg { grid-row: span 1; grid-column: span 4; } .key-xlg { grid-row: span 1; grid-column: span 6; } #arrows { width: 100%; grid-column: span 3; display: grid; grid-template-rows: repeat(2, 2fr); grid-template-columsn: repeat(3, 3fr); } .left, .down, .right { grid-row: 2; } .left { grid-column: 1; } .down { grid-column: 2; } .right { grid-column: 3; } .up { grid-column: 2; grid-row: 1; } button { font-family: "Source Sans Pro"; backdrop-filter: blur(30px); border: 0; margin: 5px; border-radius: 10px; background: #fad0c4; box-shadow: 5px 5px 6px #dab5ab, -4px -4px 6px rgb(255, 255, 255, 0.4); color: transparent; font-size: 1.8ch; border: 2px solid rgb(238, 238, 238, 0.5), 1px solid rgb(200, 200, 200, 0.9); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; text-shadow: -1px -1px 2px rgb(240, 240, 240, 0.4), 1px 1px 0px rgb(0, 0, 0, 0.15); } h6 { font-family: "Fira Code"; } h6 a { text-decoration: none; font-size: 2.5ch; color: #111; opacity: 0.5; text-shadow: 0px 0px 4px rgb(0, 0, 0, 0.4); } h6 a:hover { opacity: 1; } kbd { background-color: rgb(0, 0, 0, 0.4); border-radius: 2px; padding: 3px; color: #fff; } button:hover { box-shadow: 5px 5px 6px rgb(10, 10, 10, 0.4), -5px -5px 6px rgb(255, 255, 255, 0.5); } button:active { box-shadow: -1px -1px 6px rgb(10, 10, 10, 0.1), 1px 1px 6px rgb(255, 255, 255, 0.1); } </style> </head> <body> <div> <div id="keyboard"> <button class="key">`</button> <button class="key">1</button> <button class="key">2</button> <button class="key">3</button> <button class="k.........完整代码请登录后点击上方下载按钮下载查看
网友评论0