交互动态走光效果键盘布局
代码语言:html
所属分类:动画
代码描述:交互动态走光效果键盘布局
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: #625499; display: table-cell; height: 100vh; margin: 0; text-align: center; vertical-align: middle; width: 100vw; } .case { background-color: #463973; border-color: #2e2640; border-radius: 5px; border-style: solid; border-width: 8px 10px 15px 10px; display: inline-grid; grid-template-columns: repeat(36, 1fr); grid-template-rows: repeat(5, 1fr); height: 17em; padding: 5px; user-select: none; width: 60em; } .key { border-color: #382e59 #2e2640; border-radius: 2px; border-style: solid; border-width: 3px 5px 8px 5px; color: #bbadd9; display: block; font-family: sans-serif; font-size: 9px; font-weight: 800; grid-column-end: span 2; margin: 3px; padding-top: 2px; padding: 5px; text-align: center; text-transform: uppercase; transition: all 50ms ease-out; will-change: box-shadow, color, text-shadow; } .key:empty::before { content: attr(data-key); } .active { transform: perspective(1200px) translateZ(-90px); } .medium { grid-column-end: span 3; } .large { grid-column-end: span 4; } .xl { grid-column-end: span 5; } .xxl { grid-column-end: span 6; } .xxxl { grid-column-end: 7; } .huge { grid-column-end: span 12; } </style> </head> <body translate="no"> <div class="case"> <div class="key" data-key="escape">esc</div> <div class="key" data-key="1"></div> <div class="key" data-key="2"></div> <div class="key" data-key="3"></div> <div class="key" data-key="4"></div> <div class="key" data-key="5"></div> <div class="key" data-key="6"></div> <div class="key" data-key="7"></div> <div class="key" data-key="8"></div> <div class="key" data-key="9"></div> <div class="key" data-key="0"></div> <div class="key" data-key="-"></div> <div class="key" data-key="="></div> <div class="key xxl" data-key="backspace"></div> <div class="key" data-key="help">ins</div> <div class="key" data-key="home"></div> <div class="key large" data-key="tab"></div> <div class="key" data-key="q"></div> <div class="key" data-key="w"></div> <div class="key" data-key="e"></div> <div class="key" data-key="r"></div> <div class="key" data-key="t"></div> <div class="key" data-key="y"></div> <div class="key" data-key="u"></div> <div class="key" data-key="i"></div> <div class="key" data-key="o"></div> <div class="key" data-key="p"></div> <div class="key" data-key="["></div> <div class="key" data-key="]"></div> <div class="key large" data-key="\"></div> <div class="key" data-key="delete">del</div> <div class="key" data-key="end"></div> <div class="key xl" data-key="capslock">caps</div> <div class="key" data-key="a"></div> <div class="key" data-key="s"></div> <div class="key" data-key="d"></div> <div class="key" data-key="f"></div> <div class="key" data-key="g"></div> <div class="key" data-key="h"></div> <div class="key" data-key="j"></div> <div class="key" data-key="k"></div> <div class="key" data-key="l"></div> <div class="key" data-key=";"></div> <div class="key" data-key="'"></div> <div class="key xl" data-key="enter">return</div> <div class="key" data-key="f15">pause</div> <div class="key" data-key="pageup">pg up</div> <div class="key xxl" data-key="shiftleft">shift</div> <div class="key" data-key="z"></div> <div class="key".........完整代码请登录后点击上方下载按钮下载查看
网友评论0