Radio by XuYeean
This radio was created for CSS from the future
#212121
1.radio-input { 2 display: flex; 3 max-width: 300px; 4 justify-content: space-around; 5 align-items: center; 6 flex: 1; 7} 8 9.radio-input > .radio { 10 position: relative; 11 display: flex; 12 align-items: center; 13 justify-content: center; 14 width: 40px; 15} 16 17.input { 18 z-index: 1; 19 appearance: none; 20 width: 28px; 21 height: 28px; 22 border: 2px solid #48e9ff88; 23 transform-origin: center; 24 transform: rotateX(120deg) rotateZ(45deg); 25 transition: all 0.4s ease-in-out; 26} 27 28.input:hover:not(.input:checked) { 29 animation: light 8s ease-in-out forwards infinite alternate; 30} 31 32.input:checked { 33 animation: Scale 2.8s ease-in-out forwards infinite alternate; 34 box-shadow: 0 0 40px #48e9ff, inset 0 0 4px #48e9ff; 35} 36 37@keyframes light { 38 50% { 39 box-shadow: 0 0 40px #48e9ff, inset 0 0 8px #48e9ff; 40 } 41} 42 43label { 44 position: absolute; 45 top: 0; 46 left: 0; 47 right: 0; 48 bottom: 0; 49 width: 0; 50 height: 0; 51 margin: auto; 52 transition: all 0.4s ease-in-out; 53 transform: rotateX(120deg) rotateZ(0deg); 54 opacity: 0; 55 cursor: pointer; 56} 57 58label .center > div { 59 position: absolute; 60 width: 8px; 61 height: 8px; 62 opacity: 0; 63} 64 65.input:checked + label .center > div { 66 opacity: 1; 67} 68 69label .center > div:nth-child(1) { 70 bottom: 0; 71 right: 0; 72 border-right: 1px solid #48e9ff; 73 border-bottom: 1px solid #48e9ff; 74} 75 76label .center > div:nth-child(2) { 77 right: 0; 78 border-right: 1px solid #48e9ff; 79 border-top: 1px solid #48e9ff; 80} 81 82label .center > div:nth-child(3) { 83 bottom: 0; 84 border-left: 1px solid #48e9ff; 85 border-bottom: 1px solid #48e9ff; 86} 87 88label .center > div:nth-child(4) { 89 left: 0; 90 border-left: 1px solid #48e9ff; 91 border-top: 1px solid #48e9ff; 92} 93 94.input:checked + label { 95 opacity: 1; 96 width: 40px; 97 height: 40px; 98 transform: rotateX(120deg) rotateZ(45deg); 99} 100 101.input:checked ~ .top { 102 transform: rotateX(120deg) rotateZ(45deg) translateZ(12px) !important; 103} 104 105.top, 106.bottom { 107 position: absolute; 108 top: 0; 109 left: 0; 110 right: 0; 111 bottom: 0; 112 margin: auto; 113 width: 12px; 114 height: 12px; 115 opacity: 0; 116 transform: rotateX(120deg) rotateZ(45deg) translateZ(0px); 117} 118 119.input:checked ~ .top, 120.input:checked ~ .bottom { 121 background: #48e9ff; 122 transition: all 0.4s ease-in-out; 123 opacity: 1; 124} 125 126.input:checked ~ .bottom { 127 transform: rotateX(120deg) rotateZ(45deg) translateZ(-24px); 128 z-index: -1; 129} 130
855 views
855 views
MIT License