js+css实现虚拟键盘同步键盘按下效果代码
代码语言:html
所属分类:布局界面
代码描述:js+css实现虚拟键盘同步键盘按下效果代码,实体键盘按下什么键,虚拟键盘就会有按下的动画。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; list-style: none } :root { --little: #d16ba5; --ring: #ba83ca; --middle: #9a9ae1; --forefinger1st: #52cffe; --forefinger2nd: #5ffbf1 } body { display: flex; height: 100vh; justify-content: center; align-items: center; background-color: #000 } .keyboard { outline-width: 3px } ul.row { display: flex } ul.row li { outline-width: 2px; width: 3em; height: 3em; text-align: center; line-height: 3em; border-radius: .4em; color: rgba(0,0,0,.7); letter-spacing: 1px; margin: .4em } #tab { width: 5em } #caps { width: 6em } #leftShift { width: 8em } #enter { width: 6em } #rightShift { width: 8em } #back { width: 5em } .little { background-color: var(--little); border: 2px solid var(--little) } .little.selected { background-color: transparent; color: var(--little) } .ring { background-color: var(--ring); border: 2px solid var(--ring) } .ring.selected { background-color: transparent; color: var(--ring) } .middle { background-color: var(--middle); border: 2px solid var(--middle) } .middle.selected { background-color: transparent; color: var(--middle) } .forefinger1st { background-color: var(--forefinger1st); border: 2px solid var(--forefinger1st) } .forefinger1st.selected { background-color: transparent; color: var(--forefinger1st) } .forefinger2nd { background-color: var(--forefinger2nd); border: 2px solid var(--forefinger2nd) } .forefinger2nd.selected { background-color: transparent; color: var(--forefinger2nd) } .selected { animation: selected .3s infinite } @keyframes selected { 0% { transform: translate(0) } 20% { transform: translate(-0.4px,0.4px) } 40% { transform: translate(-0.4px,-0.4px) } 60% { transform: translate(0.4px,-0.4px) } 80% { transform: translate(0.4px,0.4px) } 100% { transform: translate(0) } } .press { animation: press .3s } @keyframes press { 0% { transform: scale(0.4) } 50% { transform: scale(1.2) } 100% { transform: scale(1) } } </style> </head> <body> <div class="keyboard"> <ul class="row"> <li class="little" id="esc">ESC</li> <li class="little" id="1">1</li> <li class="ring" id="2">2</li> <li class="middle" id="3">3</li> <li class="forefinger1st" id="4">4</li> <li class="forefinger2nd" id="5">5</li> <li class="forefinger2nd" id="6">6</li> <li class="forefinger1st" id="7">7</li> <li class="middle" id="8">8</li> <li class="ring" id="9">9</li> <li class="little" id="0">0</li> <li class="little">-</li> <li class="little">+</li> <li class="little" id="back">BACK</li> </ul> <ul class="row"> <li class="little" id="tab">TAB</li> <li class="little" id="Q">Q<.........完整代码请登录后点击上方下载按钮下载查看
网友评论0