密码解锁界面动画效果
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Poppins:300,400,500,700&display=swap'> <style> .password { --svg-color: #808390; --text-color: #414856; --weak-color: #F04545; --medium-color: #FFA850; --strong-color: #47C796; --width: 180px; --height: 30px; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; position: relative; } .password input { background: none; border: 0; outline: none; width: 22px; height: var(--height); z-index: 1; position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-transition: all .6s ease-out; transition: all .6s ease-out; cursor: pointer; color: var(--text-color); font: 400 14px 'Poppins', sans-serif; } .password .check { display: none; width: var(--height); height: var(--height); padding: 5px 2px 5px 8px; box-sizing: border-box; position: absolute; right: 0; z-index: 3; cursor: pointer; } .password .check svg { fill: none; stroke: var(--strong-color); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; stroke-dashoffset: 26; stroke-dasharray: 26; -webkit-transition: stroke-dashoffset .6s ease; transition: stroke-dashoffset .6s ease; } .password .lock { width: 180px; height: var(--height); position: absolute; right: 0; } .password .lock::before, .password .lock::after { content: ""; position: absolute; background: var(--svg-color); pointer-events: none; } .password .lock::before { right: 8px; bottom: 9px; width: 6px; height: 6px; border-radius: 50%; -webkit-transition: bottom .2s ease-out .4s, right .4s ease-out; transition: bottom .2s ease-out .4s, right .4s ease-out; } .password .lock::after { right: 10px; bottom: 5px; width: 2px; height: 10px; border-radius: 2px; -webkit-transition: bottom .4s ease-out .4s, border-radius .2s ease-out .4s, width .2s ease-out .4s, right .4s ease-out, height .4s ease .8s; transition: bottom .4s ease-out .4s, border-radius .2s ease-out .4s, width .2s ease-out .4s, right .4s ease-out, height .4s ease .8s; } .password .lock svg { display: block; height: 100%; width: 100%; fill: none; stroke: var(--svg-color); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; stroke-dashoffset: 263; stroke-dasharray: 0 263 71 263; -webkit-transition: all .6s ease-out; transition: all .6s ease-out; } .password.active input { width: var(--width); padding: 0 var(--height) 0 5px; cursor: text; box-sizing: border-box; } .password.active .check { display: -webkit-box; display: flex; } .password.active .check.submit svg { stroke-dashoffset: 0; stroke-dasharray: 26; } .password.active .check.submit ~ .lock::before, .password.active .check.submit ~ .lock::after { opacity: 0; right: 9px; -webkit-transition: right .2s ease-out, opacity .2s ease-out; transition: right .2s ease-out, opacity .2s ease-out; } .password.active .check.active ~ .lock::before { -webkit-animation: wink-animation .6s linear alternate; animation: wink-animation .6s linear alternate; background: var(--medium-color); } .password.active .check.active ~ .lock::after { -webkit-animation: wink-animation .6s linear alternate; animation: wink-animation .6s linear alternate; background: var(--medium-color); } .password.active .lock::before { right: 3px; bottom: 11px; -webkit-transition: bottom .1s ease-out .1s, right .4s ease-out .2s, background .2s ease-out, opacity .2s ease-out; transition: bottom .1s ease-out .1s, right .4s ease-out .2s, background .2s ease-out, opacity .2s ease-out; } .password.active .lock::after { right: 15px; bottom: 11px; width: 6px; height: 6px; border-radius: 50%; -webkit-transition: height .2s ease-out, bottom .2s ease-out, border-radius .2s ease-out .2s, width .2s ease-out .2s, right .4s ease-out .2s, background .2s ease-out, opacity .2s ease-out; transition: height .2s ease-out, bottom .2s ease-out, border-radius .2s ease-out .2s, width .2s ease-out .2s, right .4s ease-out .2s, background .2s ease-out, opacity .2s ease-out; } .password.active .lock svg { stroke-dashoffset: 207; stroke-dasharray: 0 263 177.........完整代码请登录后点击上方下载按钮下载查看
网友评论0