#212121
1.check { 2 cursor: pointer; 3 position: relative; 4 margin: auto; 5 width: 18px; 6 height: 18px; 7 -webkit-tap-highlight-color: transparent; 8 transform: translate3d(0, 0, 0); 9} 10 11.check:before { 12 content: ""; 13 position: absolute; 14 top: -15px; 15 left: -15px; 16 width: 48px; 17 height: 48px; 18 border-radius: 50%; 19 background: rgba(34,50,84,0.03); 20 opacity: 0; 21 transition: opacity 0.2s ease; 22} 23 24.check svg { 25 position: relative; 26 z-index: 1; 27 fill: none; 28 stroke-linecap: round; 29 stroke-linejoin: round; 30 stroke: #c8ccd4; 31 stroke-width: 1.5; 32 transform: translate3d(0, 0, 0); 33 transition: all 0.2s ease; 34} 35 36.check svg path { 37 stroke-dasharray: 60; 38 stroke-dashoffset: 0; 39} 40 41.check svg polyline { 42 stroke-dasharray: 22; 43 stroke-dashoffset: 66; 44} 45 46.check:hover:before { 47 opacity: 1; 48} 49 50.check:hover svg { 51 stroke: #4285f4; 52} 53 54#cbx:checked + .check svg { 55 stroke: #4285f4; 56} 57 58#cbx:checked + .check svg path { 59 stroke-dashoffset: 60; 60 transition: all 0.3s linear; 61} 62 63#cbx:checked + .check svg polyline { 64 stroke-dashoffset: 42; 65 transition: all 0.2s linear; 66 transition-delay: 0.15s; 67} 68
Comments
MIT License