当用户将鼠标滑动到按键时,按键标题白光浮下沉的效果,非常漂亮。这是一个CSS3 + JS设计的86键盘该键盘可用于制作打字模板,定制键盘参考等。
可以根据自己的要求定制更多细节,128键等
成品效果图

HTML:
// 60%布局-- const row1 = [ [ '?' ,'' ,'s2 esc' ] ,[ '1' ,'!' ] ,[ '2' ,'@' ] ,[ '3' ,'#' ] ,[ '4' ,'$' ] ,[ '5' ,'%' ] ,[ '6' ,'^' ] ,[ '7' ,'&' ], ['9', '('], ['0', ')'], ['-', '_', 'sub'], ['=', '+', 'add'], ['?', '', 's4 back'] ] const row2 = [ [ '?' ,'' ,'s3选项卡' ] ,[ 'Q' ] , [ 'W' ] , [ 'E' ] ,[ 'R' ] ,[ 'T' ] ,[ ' Y' ] ,[ 'U' ] ,[ 'I' ] ,[ 'O' ] ,[ 'P' ] ,[ '\ [' ,'\ {' , 'openbracket' ], [ '\]', '\}', 'closebracket'], ['\\', '|', 's3 pipe'] ] const row3 = [ [ '?' ,'' ,'s4 cap' ] , [ 'A' ] , [ 'S' ] , [ 'D' ] ,[ 'F' ,'' ,'虚线' ] ,[ 'G' ] ,[ 'H' ] ,[ 'J' ,'' ,'点' ] ,[ 'K' ] ,[ 'L' ] ,[ ';', ':', 'semi'], ['\,', '\"', 'comma'], ['?', '', 's4 enter'] ] const row4 = [ [ '?' ,'' ,'s5 shift' ] ,[ 'Z' ] , [ 'X' ] , [ 'C' ] ,[ 'V' ] ,[ 'B' ] ,[ ' N' ] ,[ 'M' ] ,[ ',' ,'<' ,'openangular' ] ,[ '。' ,'>' , ['\/', '?', 'slash'], ['?', '', 's5 shift up'] ] const row5 = [ [ '☕' ,'' ,'s3控制' ] ,[ '?' ,'' ,'s3赢' ] , [ '⭐️' ,'' ,'s3 alt' ] ,[ '' ,” ,“ s12空间” ] , [ '⭐️' ,” ,“ s3 alt” ] ,[ '?' ,” ,“s2 fn left' ] ,[ '??' , ” ,“ s2 fn down” ] ,[ '☕' ,” ,“ s2控制权” ] ] const rows = [ ... row1,... row2,... row3,... row4,... row5 ] 混合键(k ) -让size = k [ 2 ] 吗?k [ 2 ] :'' 如果k [ 1 ] && k [ 1 ] != '' 。键(on-shift = k [ 1 ] ,class = size data-key = k [ 0 ])= k [ 0 ] 其他 。键(class = size data-key = k [ 0 ])= k [ 0 ]// ---------------------------------------------------。键盘 对于ķ 在列 + 键(k )
CSS:
//不喜欢灯光吗?在这里把它关掉背光= 真 //新颜色灯= #D8DEE8黑暗= #ADBACE中= 混合(浅色,深色)最浅= 浅色(浅,70 %)//响应大小克大小= (95 / 50 )VW阴影大小= g大小/ 6// neo shadow mixin新(浅色,深色) 盒子阴影:-1 *阴影大小 -1 *阴影大小 3 *阴影大小的灯光, 阴影大小阴影大小 2 *阴影大小暗 新媒体(浅色,深色) 高光= 浅色(浅,40 %) &:悬停,&。pressed 变换 透视图(300px )比例(0.97 ) 箱阴影:插图 -1 *阴影尺寸 -1 *阴影尺寸 3 *阴影尺寸 -0.5 *阴影尺寸色调(光,30 %), 插入阴影大小阴影大小 2 *阴影大小暗 如果背光 白颜色 文字阴影: 0 0 10px高光, 0 0 15px hightlight, 0 0 20px hightlight // customize shadow for any color customize(color) background color color lighten(color, 80%) neo-press lighten(color, 10%) darken(color, 30%) // styles -----------------.keyboard display grid grid-template-columns repeat(30, g-size ) grid-template-rows repeat(5, g-size*2.5 ) grid-gap (g-size/2) background mid padding (g-size/1.1) border-radius (g-size/1.5) background light neo lightest mid .key border-radius (g-size/2.5) grid-column auto / span 2 width 100% height 100% padding (g-size/4) font-size (g-size) display grid align-items center color shade(dark, 20%) justify-content center cursor pointer background light neo lightest mid transition all 100ms cubic-bezier(.09,.32,.34,2) user-select none neo-press lightest mid &.dotted position relative &::before content '_' font-weight bold color tint(dark, 10%) position absolute top 70% left 50% transform translate(-50%, -50%) &.esc customize(#ed4c67) &.back customize(#d63031) &.shift customize(#1e90ff) &.control customize(#be2edd) &.win customize(#f7b731) &.alt customize(#5352ed) &.fn customize(#26de81) &.cap customize(#ee5a24) position relative &::before content '' position absolute width 0.5vw height 0.5vw background tint(#ee5a24, 50%) top 1vw right 1vw border-radius 50% &.on::before background tint(#ee5a24, 80%) box-shadow 0 0 0.5vw 0.2vw rgba(white, 0.8) &.tab customize(#12cbc4) &.enter customize(#fdcb6e) for i in 2 3 4 5 6 12 &.s{i} font-size (g-size/1.1) grid-column auto / span i &[on-shift] font-size (g-size/1.3) justify-items center &::before content attr(on-shift) align-items end @import url('https://fonts.lug.ustc.edu.cn/css2?family=Sen:wght@700&display=swap');* box-sizing border-box padding 0 margin 0 body font-family: 'Sen', sans-serif; min-height 100vh overflow hidden display grid place-items center 背景放射状渐变(左上方的圆圈,亮30 %,中) //由MANAN TANK设计和编程 // https://twitter.com/mnn_tnk
JS:
keyHash = { 8 :“。back” , 9 :“ .tab” , 13 :“ .enter” , 16 :“。shift” , 17 :“。control” , 18 :“。alt” , 20 :“。cap” , 27 :“。esc” , 32 :“。space” , 37 :“。left” , 38 :“。up” , 39 :“。right” , 40 :“。down” , 186 :“。semi” , 187 :'.add' , 189 :'.sub' , 222 :“。逗号” , 219 :“。openbracket” , 221 :“。closebracket” , 220 :“。pipe” , 188 :“ .openangular” , 190 :“。closeangular” , 191 :“。slash” , 91 :“。win”} ;const cap =文档。querySelector ('.cap' );函数checkCaps (){ 如果(事件。getModifierState (“大写锁定” )){ 帽。classList 。加('on' ) } 其他{ 帽。classList 。删除('on' ) }}const handleKeyDown = (e) => { checkCaps() let target = keyHash[e.keyCode]; if (!target) target = `.key[data-key="${String.fromCharCode(e.keyCode)}"]`; const key = document.querySelector(target); key && key.classList.toggle("pressed");};function unPress(e) { 如果(即propertyName的=== “改造” )此。classList 。移除(“按下” ); }窗口。addEventListener (“ keydown” ,handleKeyDown );const键=文档。querySelectorAll (“ .key” );键。的forEach ((ķ )= > ... K 的addEventListener (“transitionend” ,unPress ));
如果需要完整的文件代码参考请下载
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
喜欢就支持以下吧