css实现加锁解锁动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现加锁解锁动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <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: bling 0.3s linear forwards; animation-delay: 0.2s; } #inpLock:checked + label svg .lock { stroke-dasharray: 48; animation: locked 0.3s linear forwards; } #inpLock:checked + label svg .lockb { transform: rotate(0); transform-origin: 14px 22px; } @-moz-keyframes bling { 50% { stroke-dasharray: 3; stroke-dashoffset: 12; } 100% { stroke-dasharray: 3; stroke-dashoffset: 9; } } @-webkit-keyframes bling { 50% { stroke-dasharray: 3; stroke-dashoffset: 12; } 100% .........完整代码请登录后点击上方下载按钮下载查看
网友评论0