#e8e8e8
1.btn-lock { 2 position: absolute; 3 top: calc(50% - 32px); 4 left: calc(50% - 32px); 5 display: inline-block; 6 background: #ff5b5b; 7 width: 64px; 8 height: 64px; 9 box-sizing: border-box; 10 padding: 12px 0 0 18px; 11 border-radius: 50%; 12 cursor: pointer; 13 -webkit-tap-highlight-color: transparent; 14} 15 16.btn-lock svg { 17 fill: none; 18 transform: translate3d(0, 0, 0); 19} 20 21.btn-lock svg .bling { 22 stroke: #fff; 23 stroke-width: 2.5; 24 stroke-linecap: round; 25 stroke-dasharray: 3; 26 stroke-dashoffset: 15; 27 transition: all 0.3s ease; 28} 29 30.btn-lock svg .lock { 31 stroke: #fff; 32 stroke-width: 4; 33 stroke-linejoin: round; 34 stroke-linecap: round; 35 stroke-dasharray: 36; 36 transition: all 0.4s ease; 37} 38 39.btn-lock svg .lockb { 40 fill: #fff; 41 fill-rule: evenodd; 42 clip-rule: evenodd; 43 transform: rotate(8deg); 44 transform-origin: 14px 20px; 45 transition: all 0.2s ease; 46} 47 48#inpLock { 49 display: none; 50} 51 52#inpLock:checked + label { 53 background: #20cca5; 54} 55 56#inpLock:checked + label svg { 57 opacity: 1; 58} 59 60#inpLock:checked + label svg .bling { 61 animation: bling6132 0.3s linear forwards; 62 animation-delay: 0.2s; 63} 64 65#inpLock:checked + label svg .lock { 66 stroke-dasharray: 48; 67 animation: locked 0.3s linear forwards; 68} 69 70#inpLock:checked + label svg .lockb { 71 transform: rotate(0); 72 transform-origin: 14px 22px; 73} 74 75@keyframes bling6132 { 76 50% { 77 stroke-dasharray: 3; 78 stroke-dashoffset: 12; 79 } 80 81 100% { 82 stroke-dasharray: 3; 83 stroke-dashoffset: 9; 84 } 85} 86 87@keyframes locked { 88 50% { 89 transform: translateY(1px); 90 } 91} 92
9.9K views
9.9K views
Comments
1shoptinhyeuvn 20. November at 10:22
20. November at 10:22
Thank you
MIT License