当前位置: 首页 > Web前端 > vue.js

写密码-验证码输入框【pc】

时间:2023-04-01 12:10:59 vue.js

@keyframesfade{//动画来自{opacity:1.0;}50%{不透明度:0.2;}到{不透明度:1.0;}}.dialog{宽度:100vw;高度:100vh;z-指数:999;背景色:rgba(0,0,0,.6);显示:弹性;高度:200px;背景色:#fff;边框:1px实心#fff;框阴影:0px0px10pxrgba(0,0,0,.6)插图;项目:中心;。盒子{位置:相对;显示:弹性;.enter{宽度:50px;高度:50px;边框:1px实心#000;边界半径:5px;边距:05px00;z-指数:100;显示:弹性;字体大小:30px;证明内容:居中;对齐项目:居中;//跳跃的指示符.tips{height:30px;宽度:1px;背景色:#000;动画:淡入淡出1000ms无限;}}.int{边框:无;显示:内联块;宽度:100%;高度:50px;位置:绝对;z-指数:999;不透明度:0;}}}}.salary-container{padding:30px;}主要思想:使用input进行输入,宽高刚好等于六个密码框。使用六个div来显示输入的密码。请改用*。也可以在每个密码块中写一个div来显示提示,根据place匹配提示中应该出现的格子输入的层级需要高于6个密码显示块。设置不透明度:0;隐藏输入,让用户看不到输入框。当点击密码块时,其实就是点击的输入框。输入密码块,遍历密码数组进行对应显示。代码如下:@keyframesfade{//动画来自{opacity:1.0;}50%{不透明度:0.2;}到{不透明度:1.0;}}.dialog{宽度:100vw;高度:100vh;z-指数:999;背景色:rgba(0,0,0,.6);显示:弹性;高度:200px;背景色:#fff;边框:1px实心#fff;框阴影:0px0px10pxrgba(0,0,0,.6)插图;项目:中心;。盒子{位置:相对;显示:弹性;.enter{宽度:50px;高度:50px;边框:1px实心#000;边界半径:5px;边距:05px00;z-指数:100;显示:弹性;字体大小:30px;证明内容:居中;对齐项目:居中;//跳跃的指示符.tips{height:30px;宽度:1px;背景色:#000;动画:淡入淡出1000ms无限;}}.int{边框:无;显示:内联块;宽度:100%;高度:50px;位置:绝对;z-指数:999;不透明度:0;}}}}.salary-container{padding:30px;}效果图: