#212121
1.radioContainer { 2 display: flex; 3 justify-content: space-between; 4 position: relative; 5 width: 220px; 6} 7 8.radioButton { 9 display: none; 10} 11 12.radioContainer .container { 13 display: inline-flex; 14 justify-content: center; 15 align-items: center; 16 position: relative; 17 transition: 0.8s; 18 cursor: pointer; 19 width: 65px; 20 height: 65px; 21 background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%); 22 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 23 box-shadow: 0 0 5px inset white; 24} 25 26.border { 27 position: absolute; 28 background-color: #212121; 29 width: 100%; 30 height: 100%; 31 transform: scale(0.7) rotate(30deg); 32 transition: 0.3s; 33 clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); 34} 35 36.border2 { 37 position: absolute; 38 background-color: #212121; 39 width: 100%; 40 height: 100%; 41 transform: scale(0.45); 42 transition: 0.2s; 43 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 44} 45 46.radioContainer input[type="radio"]:checked + .container { 47 filter: hue-rotate(330deg); 48 animation: 2s linear checked; 49} 50 51.radioContainer input[type="radio"]:checked + .container .circle { 52 transform: scale(0.8); 53} 54 55.radioContainer input[type="radio"]:checked + .container .border { 56 animation: 4s linear infinite reverse rotateBorder; 57} 58 59.radioContainer input[type="radio"]:checked + .container .border2 { 60 animation: 2s linear reverse rotateBorder2; 61} 62 63.circle { 64 background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%); 65 border-radius: 100%; 66 width: 22%; 67 height: 22%; 68 transition: 0.25s; 69 z-index: 2; 70 transform: scale(0); 71} 72 73.radioContainer .container:hover .circle { 74 transform: scale(0.8); 75 box-shadow: 0 20px 20px #00c6fb; 76} 77 78@keyframes checked { 79 0% { 80 transform: rotate(0deg) scale(1); 81 } 82 83 50% { 84 transform: rotate(0deg) scale(1.07); 85 } 86 87 100% { 88 transform: rotate(360deg) scale(1); 89 } 90} 91 92@keyframes rotateBorder { 93 0% { 94 transform: scale(0.7) rotate(0deg); 95 } 96 97 50% { 98 transform: scale(0.7) rotate(0deg); 99 } 100 101 100% { 102 transform: scale(0.7)rotate(360deg); 103 } 104} 105 106@keyframes rotateBorder2 { 107 0% { 108 transform: scale(0.51) rotate(30deg); 109 } 110 111 50% { 112 transform: scale(0.51) rotate(0deg); 113 } 114 115 100% { 116 transform: scale(0.51) rotate(360deg); 117 } 118} 119
525 views
525 views
Comments
MIT License