#212121
1.checkbox-wrapper-12 { 2 position: relative; 3} 4 5.checkbox-wrapper-12 > svg { 6 position: absolute; 7 top: -130%; 8 left: -170%; 9 width: 110px; 10 pointer-events: none; 11} 12 13.checkbox-wrapper-12 * { 14 box-sizing: border-box; 15} 16 17.checkbox-wrapper-12 input[type="checkbox"] { 18 -webkit-appearance: none; 19 -moz-appearance: none; 20 appearance: none; 21 -webkit-tap-highlight-color: transparent; 22 cursor: pointer; 23 margin: 0; 24} 25 26.checkbox-wrapper-12 input[type="checkbox"]:focus { 27 outline: 0; 28} 29 30.checkbox-wrapper-12 .cbx { 31 width: 24px; 32 height: 24px; 33 top: calc(100px - 12px); 34 left: calc(100px - 12px); 35} 36 37.checkbox-wrapper-12 .cbx input { 38 position: absolute; 39 top: 0; 40 left: 0; 41 width: 24px; 42 height: 24px; 43 border: 2px solid #bfbfc0; 44 border-radius: 50%; 45} 46 47.checkbox-wrapper-12 .cbx label { 48 width: 24px; 49 height: 24px; 50 background: none; 51 border-radius: 50%; 52 position: absolute; 53 top: 0; 54 left: 0; 55 transform: trasnlate3d(0, 0, 0); 56 pointer-events: none; 57} 58 59.checkbox-wrapper-12 .cbx svg { 60 position: absolute; 61 top: 5px; 62 left: 4px; 63 z-index: 1; 64 pointer-events: none; 65} 66 67.checkbox-wrapper-12 .cbx svg path { 68 stroke: #fff; 69 stroke-width: 3; 70 stroke-linecap: round; 71 stroke-linejoin: round; 72 stroke-dasharray: 19; 73 stroke-dashoffset: 19; 74 transition: stroke-dashoffset 0.3s ease; 75 transition-delay: 0.2s; 76} 77 78.checkbox-wrapper-12 .cbx input:checked + label { 79 animation: splash-12 0.6s ease forwards; 80} 81 82.checkbox-wrapper-12 .cbx input:checked + label + svg path { 83 stroke-dashoffset: 0; 84} 85 86@-moz-keyframes splash-12 { 87 40% { 88 background: #866efb; 89 box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb; 90 } 91 92 100% { 93 background: #866efb; 94 box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent; 95 } 96} 97 98@-webkit-keyframes splash-12 { 99 40% { 100 background: #866efb; 101 box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb; 102 } 103 104 100% { 105 background: #866efb; 106 box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent; 107 } 108} 109 110@-o-keyframes splash-12 { 111 40% { 112 background: #866efb; 113 box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb; 114 } 115 116 100% { 117 background: #866efb; 118 box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent; 119 } 120} 121 122@keyframes splash-12 { 123 40% { 124 background: #866efb; 125 box-shadow: 0 -18px 0 -8px #866efb, 16px -8px 0 -8px #866efb, 16px 8px 0 -8px #866efb, 0 18px 0 -8px #866efb, -16px 8px 0 -8px #866efb, -16px -8px 0 -8px #866efb; 126 } 127 128 100% { 129 background: #866efb; 130 box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent; 131 } 132}
Comments
MIT License