css实现键盘布局引导用户按键效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现键盘布局引导用户按键效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: black; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .title { color: mintcream; text-transform: uppercase; margin-top: 3em; margin-bottom: 3em; font-size: 1em; letter-spacing: 0.3em; } .keyboard { display: flex; flex-direction: column; } .row { list-style: none; display: flex; } li { height: 3em; width: 3em; color: rgba(0,0,0,0.7); border-radius: 0.4em; line-height: 3em; letter-spacing: 1px; margin: 0.4em; transition: 0.3s; text-align: center; font-size: 1em; } #tab { width: 5em; } #caps { width: 6em; } #left-shift { width: 8em; } #enter { width: 6em; } #right-shift { width: 8em; } #back { width: 5em; } .pinky { background-color: crimson; border: 2px solid crimson; } .pinky.selected { color: crimson; } .ring { background-color: coral; border: 2px solid coral; } .ring.selected { color: coral; } .middle { background-color: darkorange; border: 2px solid darkorange; } .middle.selected { color: darkorange; } .pointer1st { background-color: gold; border: 2px solid gold; } .pointer1st.selected { color: gold; } .pointer2nd { background-color: khaki; border: 2px solid khaki; } .pointer2nd.selected { color: khaki; } .fill-out-key { background-color: slategrey; border: 2px solid slategrey; } .selected { background-color: transparent; -webkit-animation: vibrate-1 0.3s linear infinite both; animation: vibrate-1 0.3s linear infinite both; } /* ---------------------------------------------- * Generated by Animista * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ .hit { -webkit-animation: hit 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: hit 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; } @-webkit-keyframes hit { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes hit { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes vibrate-1 { 0% { -webkit-transform: translate(0); transform: translate(0); } 20% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 40% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 60% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } 80% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); } 100% { -webkit-transform: translate(0); transform: translate(0); } } @keyframes vibrate-1 { 0% { -webkit-transform: translate(0); transform: translate(0); } 20% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 40% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 60% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } 80% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); } 100% { -webkit-transform: translate(0); transform: translate(0); } } </style> </head> <body > <h1 class="title">Eyes on the screen</h1> <div class="keyboard"> <ul class="row row-0"> <li class="pinky" id="esc">ESC</li> <li class="pinky" id="1">1</li> <li class="ring" id="2">2</li> <li class="middle" id="3">3</li> <li class="pointer1st" id="4">4</li> <li class="pointer2nd" id="5">5</li> <li class="pointer2nd" id="6">6</li> <li class="pointer1st" id="7">7</li&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0