#e8e8e8
1.cbx { 2 position: relative; 3 top: 1px; 4 width: 27px; 5 height: 27px; 6 border: 1px solid #c8ccd4; 7 border-radius: 3px; 8 vertical-align: middle; 9 transition: background 0.1s ease; 10 cursor: pointer; 11 display: block; 12} 13 14.cbx:after { 15 content: ''; 16 position: absolute; 17 top: 2px; 18 left: 8px; 19 width: 7px; 20 height: 14px; 21 opacity: 0; 22 transform: rotate(45deg) scale(0); 23 border-right: 2px solid #fff; 24 border-bottom: 2px solid #fff; 25 transition: all 0.3s ease; 26 transition-delay: 0.15s; 27} 28 29.lbl { 30 margin-left: 5px; 31 vertical-align: middle; 32 cursor: pointer; 33} 34 35#cbx:checked ~ .cbx { 36 border-color: transparent; 37 background: #6871f1; 38 animation: jelly 0.6s ease; 39} 40 41#cbx:checked ~ .cbx:after { 42 opacity: 1; 43 transform: rotate(45deg) scale(1); 44} 45 46.cntr { 47 position: relative; 48} 49 50@keyframes jelly { 51 from { 52 transform: scale(1, 1); 53 } 54 55 30% { 56 transform: scale(1.25, 0.75); 57 } 58 59 40% { 60 transform: scale(0.75, 1.25); 61 } 62 63 50% { 64 transform: scale(1.15, 0.85); 65 } 66 67 65% { 68 transform: scale(0.95, 1.05); 69 } 70 71 75% { 72 transform: scale(1.05, 0.95); 73 } 74 75 to { 76 transform: scale(1, 1); 77 } 78} 79 80.hidden-xs-up { 81 display: none!important; 82} 83
21K views
21K views
Comments
MIT License