Radio by wizard503
This radio was created for CSS from the future
#212121
1.box { 2 position: relative; 3 width: 300px; 4 height: 150px; 5 background: tra; 6 border-radius: 8px; 7 overflow: hidden; 8} 9 10.box::before { 11 content: ""; 12 position: absolute; 13 top: -50%; 14 left: -50%; 15 width: 400px; 16 height: 450px; 17 background: linear-gradient(0deg,transparent,transparent,#2df4e9,#2df4e9,#48fb00); 18 z-index: 1; 19 transform-origin: bottom right; 20 animation: animate 5s linear infinite; 21} 22 23.box::after { 24 content: ""; 25 position: absolute; 26 top: -50%; 27 left: -50%; 28 width: 400px; 29 height: 450px; 30 background: linear-gradient(0deg,transparent,transparent,#f07f90,#f07f90,#c70000); 31 z-index: 1; 32 transform-origin: bottom right; 33 animation: animate 5s linear infinite; 34 animation-delay: -2.5s; 35} 36 37@keyframes animate { 38 0% { 39 transform: rotate(0deg); 40 } 41 42 100% { 43 transform: rotate(360deg); 44 } 45} 46 47.box .radio-input { 48 position: absolute; 49 inset: 4px; 50 background-color: #161616; 51 background-image: radial-gradient(ellipse at center, #eb3be3 0%, #231f55 70%); 52 background-size: 100% 100%; 53 animation: noise 1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; 54 border-radius: 10px; 55 padding: 50px 0px; 56 z-index: 2; 57 display: flex; 58} 59 60@keyframes noise { 61 0%, 20%, 40%, 60%, 80%, 100% { 62 background-position: 0 0; 63 } 64 65 10% { 66 background-position: -5px -5px; 67 } 68 69 30% { 70 background-position: 5px -5px; 71 } 72 73 50% { 74 background-position: -5px 5px; 75 } 76 77 70% { 78 background-position: 5px 5px; 79 } 80} 81 82.radio-input input { 83 appearance: none; 84 width: 1.3em; 85 height: 1.3em; 86 margin: 12px; 87 font-size: inherit; 88 color: currentColor; 89 border: 0.2em solid #33f8ff; 90 box-shadow: 2px 2px 1px 0px rgb(7, 15, 63),4px 4px 5px 1px #690253 inset; 91 transform: translateY(-0.075em); 92 display: grid; 93 place-content: center; 94 outline: none; 95 transition: all 0.2s ease-in-out; 96} 97 98.radio-input input:checked { 99 width: 1.2em; 100 height: 1.2em; 101 appearance: none; 102 border-radius: 0%; 103 rotate: 45deg; 104 border: 0.2em solid #ff0; 105 -webkit-appearance: none; 106 -moz-appearance: none; 107 transform: scale(1.4); 108 transition: 120ms transform ease-in-out; 109 box-shadow: 9px 9px 10px 1px #5f0875 inset,12px -12px 10px 1px #2df4e9 inset,0 0 20px #ff0,0 0 20px #ff0; 110} 111 112label { 113 cursor: pointer; 114 padding-top: 5%; 115 font-size: 15px; 116 font-weight: bold; 117 text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.2); 118 transition: color 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95); 119}
612 views
612 views
MIT License