【CSS3】制作一个漂亮的键盘HTML + CSS + JS

当用户将鼠标滑动到按键时,按键标题白光浮下沉的效果,非常漂亮。这是一个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 ));

如果需要完整的文件代码参考请下载

付费资源
  • 【CSS3】制作一个漂亮的键盘HTML + CSS + JS——咕咕小站
  • 【CSS3】制作一个漂亮的键盘HTML + CSS + JS
    免费资源
资源下载
© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发