vue实现车牌号输入键盘效果代码
代码语言:html
所属分类:布局界面
代码描述:vue实现车牌号输入键盘效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <style> html{ height: 100%; } body{ margin: 0px; height: 100%; background-color: #f2f2f2; font-family: "SimHei"; color: #333; font-size: 16px; } *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:focus{ outline: none; } ul{ margin: 0px; padding: 0px; } li{ list-style: none; } #body{ } #body .div_select{ background-color: #fff; padding: 20px; } #body .div_select .div_name{ font-size: 0.9em; height: 30px; } #body .div_select .div_name img{ height: 100%; float: left; } #body .div_select .div_name div{ height: 100%; overflow: hidden; line-height: 30px; padding-left: 8px; font-weight: bold; } #body .div_select .div_select_se{ border: 1px solid #5495f6; height: 32px; margin-top: 15px; } #body .div_select .div_select_se select{ width: 100%; height: 100%; border: 0px; padding:0px 8px; font-size: 0.9em; } #body .div_input{ background-color: #fff; margin-top: 12px; padding: 20px; } #body .div_input .div_name{ font-size: 0.9em; font-weight: bold; line-height: 20px; margin-bottom: 15px; } #body .div_input .div_licensePlate{ margin-bottom: 15px; border: 1px solid #5495f6; height: 44px; border-radius: 6px; overflow: hidden; } #body .div_input .div_licensePlate ul{ width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: flex; } #body .div_input .div_licensePlate li{ height: 100%; border-left: 1px solid #5495f6; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; position: relative; } /*#body .div_input .div_licensePlate li:nth-child(8){*/ /*display: none;*/ /*}*/ #body .div_input .div_licensePlate li input{ position: absolute; left: 0px; top:0px; width: 100%; height: 44px; border: 0px; background-color: initial; font-size: 1.2em; text-align: center; font-weight: bold; line-height: 44px; } #body .div_input .div_licensePlate li:nth-child(1){ border-left: 0px; background-color:#5495f6 ; color: #fff; } #body .div_input .div_licensePlate li:nth-child(1) input{ color: #fff; } #body .div_input .div_licensePlate li.li_show{ border-bottom: 1px solid #ff0000; animation:li_show 1s infinite linear; /*-moz-animation:li_show 5s; !* Firefox *!*/ /*-webkit-animation:li_show 5s; !* Safari and Chrome *!*/ /*-o-animation:li_show 5s; !* Opera *!*/ } @keyframes li_show { 0% { border-bottom: 1px solid #ff0000;} 50% { border-bottom: 0px} 100% { border-bottom: 1px solid #ff0000;} } /*@-moz-keyframes li_show !* Firefox *!*/ /*{*/ /*0% { border-bottom: 1px solid #ff0000;}*/ /*100% { border-bottom: 1px solid initial;}*/ /*}*/ /*@-webkit-keyframes li_show !* Safari and Chrome *!*/ /*{*/ /*0% { border-bottom: 1px solid #ff0000;}*/ /*100% { border-bottom: 1px solid initial;}*/ /*}*/ /*@-o-keyframes li_show !* Opera *!*/ /*{*/ /*0% { border-bottom.........完整代码请登录后点击上方下载按钮下载查看
网友评论0