3.9K views
CSSAdd prefixes
1.check { 2 position: relative; 3 width: 20px; 4 height: 20px; 5 border-radius: 2px; 6 appearance: none; 7 background-color: #bbb; 8 transition: all .3s; 9} 10 11.check::before { 12 content: ''; 13 position: absolute; 14 border: solid #fff; 15 display: block; 16 width: .3em; 17 height: .6em; 18 border-width: 0 .2em .2em 0; 19 z-index: 1; 20 opacity: 0; 21 right: calc(50% - .3em); 22 top: calc(50% - .6em); 23 transform: rotate(0deg); 24 transition: all .3s; 25 transform-origin: center center; 26} 27 28.check:checked { 29 animation: a .3s ease-in forwards; 30 background-color: rgb(120, 190, 120); 31} 32 33.check:checked::before { 34 opacity: 1; 35 transform: rotate(405deg); 36} 37 38@keyframes a { 39 0% { 40 opacity: 1; 41 transform: scale(1) rotateY(0deg); 42 } 43 44 50% { 45 opacity: 0; 46 transform: scale(.8) rotateY(180deg); 47 } 48 49 100% { 50 opacity: 1; 51 transform: scale(1) rotateY(360deg); 52 } 53}
HTML
1 2<input checked="" class="check" type="checkbox">