css+js实现炫酷滑动验证码输入框效果代码
代码语言:html
所属分类:表单美化
代码描述:css+js实现炫酷滑动验证码输入框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),90%,90%); --fg: hsl(var(--hue),90%,10%); --primary: hsl(var(--hue),90%,50%); --primary-down: hsl(var(--hue),90%,40%); --trans-dur: 0.3s; font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320)); } body, button, input { font: 1em/1.5 sans-serif; } body { background-color: var(--bg); color: var(--fg); height: 100vh; display: grid; overflow-x: hidden; place-items: center; transition: background-color var(--trans-dur), color var(--trans-dur); } .passcode { background-color: hsl(var(--hue),90%,95%); box-shadow: 0 1.5em 3em hsl(var(--hue),90%,80%); display: flex; justify-content: space-around; align-items: center; position: relative; width: 12em; height: 3em; transition: background-color var(--trans-dur), box-shadow var(--trans-dur); } .passcode--denied { animation: shake 0.5s ease-in-out; } .passcode--granted { animation: fadeSlideOut 0.5s ease-in-out forwards, fadeSlideIn 0.25s 1s ease-out; } .passcode__arrow { display: block; margin: auto; opacity: 0; pointer-events: none; position: relative; width: 1em; height: 1em; transform: translateX(-50%); transition: opacity var(--trans-dur) ease-in-out, transform var(--trans-dur) ease-in-out; } .passcode__button { background-color: var(--primary); color: hsl(var(--hue),90%,95%); cursor: pointer; position: absolute; top: 0; left: 100%; width: 3em; height: 3em; transform: scaleX(0); transform-origin: 0 50%; transition: background-color 0.15s linear, transform var(--trans-dur) 0.3s ease-in-out; -webkit-tap-highlight-color: transparent; } .passcode__button:focus, .passcode__digit:focus { outline: transparent; } .passcode__button:focus, .passcode__button:hover { background-color: var(--primary-down); } .passcode__caret, .passcode__caret-move { pointer-events: none; position: absolute; left: 1.4em; height: 1.5em; } .passcode__caret, .passcode__caret-move:before { background-color: var(--primary); } .passcode__caret { opacity: 0; width: 0.2em; z-index: 1; } .passcode__caret-move { overflow: hidden; width: 3.2em; z-index: 2; } .passcode__caret-move--3 { transform: translateX(3em); } .passcode__caret-move--4 { transform: translateX(6em); } .passcode__caret-move--5 { clip-path: polygon(0 0,50% 0,50% 100%,0 100%); transform: translateX(9em); } .passcode__caret-move:before { content: ""; display: block; width: 100%; height: 100%; transform: translateX(-100%); } .passcode__digit { background-color: transparent; color: var(--primary); caret-color: transparent; font-family: "Noto Sans Mono", monospace; text-align: center; width: 1.5em; height: 1.5em; -webkit-appearance: none; appearance: none; -moz-appearance: textfield; -webkit-tap-highlight-color: transparent; } .passcode__digit::-webkit-outer-spin-button, .passcode__digit::-webkit-inner-spin-button { display: none; } .passcode__digit:placeholder-shown { background-image: linear-gradient(90deg,hsla(var(--hue),90%,50%,0) 0.65em,hsla(var(--hue),90%,50%,0.2) 0.65em 0.85em,hsla(var(--hue),90%,50%,0) 0.85em); } .passcode__digit:not(:placeholder-shown) { animation: fadeScaleIn 0.3s ease-in-out; } .passcode__digit:not(:placeholder-shown) + .passcode__button { transform: scaleX(1); transition-delay: 0.15s, 0.3s; } .passcode__digit:not(:placeholder-shown) + .passcode__button .passcode__arrow { opacity: 1; transform: translateX(0); transition-delay: 0.6s; } .passcode__digit:focus:placeholder-shown ~ .passcode__caret { animation: caretBlink 1s ease-in-out infinite; } .passcode__digit:nth-of-type(n + 2):focus:placeholder-shown ~ .passcode__caret { animation-delay: 0.3s; } .passcode__digit:nth-of-type(2):focus:placeholder-shown ~ .passcode__caret { transform: translateX(3em); } .passcode__digit:nth-of-type(3):focus:placeholder-shown ~ .passcode__caret { transform: translateX(6em); } .passcode__digit:nth-of-type(4):focus:placeholder-shown ~ .passcode__caret { transform: translateX(9em); } .passcode__digit:nth-of-type(1):not(:placeholder-shown) ~ .passcode__digit:nth-of-type(2):focus:placeholder-shown ~ .passcode__caret-move--2:before, .passcode__digit:nth-of-type(2):not(:placeholder-shown) ~ .passcode__digit:nth-of-type(3):focus:placeholder-shown ~ .passcode__caret-move--3:before, .passcode__digit:nth-of-type(3):not(:placeholder-shown) ~ .passcode__digit:nth-of-type(4):focus:placeholder-shown ~ .passcode__caret-move--4:before, .passcode__digit:nth-of-type(4):not(:placeholder-shown) ~ .passcode__button:focus ~ .passcode__caret-move--5:before { animation: caretMove 0.3s ease-in-out; } .passcode--reverse .passcode__caret-move--2 { transform: translateX(3em); } .passcode--reverse .passcode__caret-move--3 { transform: translateX(6em); } .passcode--reverse .passcode__caret-move--4 { clip-path: polygon(0 0,50% 0,50% 100%,0 100%); transform: translateX(9em); } .passcode--reverse .passcode__digit:nth-of-type(1):focus:placeholder-shown ~ .passcode__caret { animation-delay: 0.3s; } .passcode--reverse .passcode__digit:nth-of-type(1):focus:placeholder-shown ~ .passcode__caret-move--1:before, .passcode--reverse .passcode__digit:nth-of-type(1):not(:placeholder-shown) ~ .passcode__digit:nth-of-type(2):focus:placeholder-shown ~ .passcode__caret-move--2:before, .passcode--reverse .passcode__digit:nth-of-type(2):not(:placeholder-shown) ~ .passcode__digit:nth-of-type(3):focus:placeholder-shown ~ .passcode__caret-move--3:before, .passcode--reverse .passcode__digit:nth-of-type(3):not(:placeholder-shown) ~ .passcode__digit:nth-of-type(4):focus:placeholder-shown ~ .passcode__caret-move--4:before, .passcode--reverse .passcode__digit:nth-of-type(4):not(:placeholder-shown) ~ .passcode__button:focus ~ .passcode__caret-move--5:before { animation: caretMoveReverse 0.3s ease-in-out; } .passcode__sr { overflow: hidden; position: absolute; width: 1px; height: 1px; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),90%,20%); --fg: hsl(var(--hue),90%,90%); --primary: hsl(var(--hue),90%,60%); --primary-down: hsl(var(--hue),90%,50%); } .passcode { background-color: hsl(var(--hue),90%,5%); box-shadow: 0 1.5em 3em hsl(var(--hue),90%,30%); } } /* `:focus-visible` support */ @supports selector(:focus-visible) { .passcode__button:focus { background-color: var(--primary); } .passcode__button:focus-visible, .passcode__button:hover { background-color: var(--primary-down); } } /* Animations */ @keyframes caretBlink { from, to { opacity: 1; } 50% { opacity: 0; } } @keyframes caretMove { from { transform: translateX(-2.8em); } 50% { transform: translateX(0); } to { transform.........完整代码请登录后点击上方下载按钮下载查看
网友评论0