229 views
1/* The switch - the box around the slider */ 2.switch { 3 position: relative; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 width: 3.8em; 8 height: 3.8em; 9} 10 11.torch { 12 margin-top: 0.9em; 13 margin-left: 0.95em; 14 width: 30px; 15 height: 30px; 16 transform: rotate(-45deg); 17} 18 19.slider .b { 20 position: relative; 21 top: -3.3em; 22 transform: rotate(270deg); 23} 24 25.slider .bling_85 { 26 stroke: #fff; 27 stroke-width: 2.5; 28 stroke-linecap: round; 29 stroke-dasharray: 3; 30 stroke-dashoffset: 15; 31 transition: all 0.3s ease; 32} 33 34/* Hide default HTML checkbox */ 35.switch input { 36 opacity: 0; 37 width: 0; 38 height: 0; 39} 40 41/* The slider */ 42.slider { 43 position: absolute; 44 cursor: pointer; 45 top: 0; 46 left: 0; 47 right: 0; 48 bottom: 0; 49 transition: .4s; 50 border-radius: 50%; 51 background-color: rgba(116, 115, 115, 0.2); 52 backdrop-filter: blur(5px); 53 -webkit-backdrop-filter: blur(5px); 54 border: 1px solid rgba(255, 255, 255, 0.3); 55} 56 57.chk_85:checked + .slider { 58 animation: tap 0.3s linear forwards; 59} 60 61.chk_85:checked + .slider .bling_85 { 62 animation: bling_8561328 0.3s linear forwards; 63 animation-delay: 0.2s; 64} 65 66.chk_85:checked + .slider { 67 background-color: #FFA133; 68} 69 70.chk_85:focus + .slider { 71 box-shadow: 0 0 1px #FFA133; 72} 73 74@keyframes bling_8561328 { 75 50% { 76 stroke-dasharray: 3; 77 stroke-dashoffset: 12; 78 } 79 80 100% { 81 stroke-dasharray: 3; 82 stroke-dashoffset: 9; 83 } 84} 85 86@keyframes tap { 87 50% { 88 scale: 0.9; 89 } 90 91 100% { 92 scale: 1; 93 } 94}
Praashoo7
Prashant
MIT License