div+css实现密码锁checkbox开关效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现密码锁checkbox开关效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> .btn-lock { position: absolute; top: calc(50% - 32px); left: calc(50% - 32px); display: inline-block; background: #ff5b5b; width: 64px; height: 64px; box-sizing: border-box; padding: 12px 0 0 18px; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; } .btn-lock svg { fill: none; transform: translate3d(0, 0, 0); } .btn-lock svg .bling { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3; stroke-dashoffset: 15; transition: all 0.3s ease; } .btn-lock svg .lock { stroke: #fff; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 36; transition: all 0.4s ease; } .btn-lock svg .lockb { fill: #fff; fill-rule: evenodd; clip-rule: evenodd; transform: rotate(8deg); transform-origin: 14px 20px; transition: all 0.2s ease; } #inpLock { display: none; } #inpLock:checked + label { background: #20cca5; } #inpLock:checked + label svg { opacity: 1; } #inpLock:checked + label svg .bling { animation: bling6132 0.3s linear forwards; animation-delay: 0.2s; } #inpLock:checked + label svg .lock { stroke-dasharray: 48; ani.........完整代码请登录后点击上方下载按钮下载查看
网友评论0