Checkbox by faxriddin20

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: lime;
89    box-shadow: 0 -18px 0 -8px lime, 16px -8px 0 -8px lime, 16px 8px 0 -8px lime,
90      0 18px 0 -8px lime, -16px 8px 0 -8px lime, -16px -8px 0 -8px lime;
91  }
92
93  100% {
94    background: lime;
95    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,
96      32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,
97      -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
98  }
99}
100
101@-webkit-keyframes splash-12 {
102  40% {
103    background: lime;
104    box-shadow: 0 -18px 0 -8px lime, 16px -8px 0 -8px lime, 16px 8px 0 -8px lime,
105      0 18px 0 -8px lime, -16px 8px 0 -8px lime, -16px -8px 0 -8px lime;
106  }
107
108  100% {
109    background: lime;
110    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,
111      32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,
112      -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
113  }
114}
115
116@-o-keyframes splash-12 {
117  40% {
118    background: lime;
119    box-shadow: 0 -18px 0 -8px lime, 16px -8px 0 -8px lime, 16px 8px 0 -8px lime,
120      0 18px 0 -8px lime, -16px 8px 0 -8px lime, -16px -8px 0 -8px lime;
121  }
122
123  100% {
124    background: lime;
125    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,
126      32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,
127      -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
128  }
129}
130
131@keyframes splash-12 {
132  40% {
133    background: lime;
134    box-shadow: 0 -18px 0 -8px lime, 16px -8px 0 -8px lime, 16px 8px 0 -8px lime,
135      0 18px 0 -8px lime, -16px 8px 0 -8px lime, -16px -8px 0 -8px lime;
136  }
137
138  100% {
139    background: lime;
140    box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent,
141      32px 16px 0 -10px transparent, 0 36px 0 -10px transparent,
142      -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
143  }
144}
145