553 views
1.form { 2 --background: #ffffff; 3 --text: #414856; 4 --radio: #7C96B2; 5 --radio-checked: #4F29F0; 6 --radio-size: 20px; 7 --width: 150px; 8 --height: 140px; 9 --border-radius: 10px; 10 background: var(--background); 11 width: var(--width); 12 height: var(--height); 13 border-radius: var(--border-radius); 14 color: var(--text); 15 position: relative; 16 box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); 17 padding: 30px 20px; 18 display: grid; 19 grid-template-columns: auto var(--radio-size); 20 align-items: center; 21} 22 23.form label { 24 cursor: pointer; 25} 26 27.form input[type="radio"] { 28 -webkit-appearance: none; 29 -moz-appearance: none; 30 position: relative; 31 height: var(--radio-size); 32 width: var(--radio-size); 33 outline: none; 34 margin: 0; 35 cursor: pointer; 36 border: 2px solid var(--radio); 37 background: transparent; 38 border-radius: 50%; 39 display: grid; 40 justify-self: end; 41 justify-items: center; 42 align-items: center; 43 overflow: hidden; 44 transition: border .5s ease; 45} 46 47.form input[type="radio"]::before, .form input[type="radio"]::after { 48 content: ""; 49 display: flex; 50 justify-self: center; 51 border-radius: 50%; 52} 53 54.form input[type="radio"]::before { 55 position: absolute; 56 width: 100%; 57 height: 100%; 58 background: var(--background); 59 z-index: 1; 60 opacity: var(--opacity, 1); 61} 62 63.form input[type="radio"]::after { 64 position: relative; 65 width: calc(100% /2); 66 height: calc(100% /2); 67 background: var(--radio-checked); 68 top: var(--y, 100%); 69 transition: top 0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63); 70} 71 72.form input[type="radio"]:checked { 73 --radio: var(--radio-checked); 74} 75 76.form input[type="radio"]:checked::after { 77 --y: 0%; 78 animation: stretch-animate .3s ease-out .17s; 79} 80 81.form input[type="radio"]:checked::before { 82 --opacity: 0; 83} 84 85.form input[type="radio"]:checked ~ input[type="radio"]::after { 86 --y: -100%; 87} 88 89.form input[type="radio"]:not(:checked)::before { 90 --opacity: 1; 91 transition: opacity 0s linear .5s; 92} 93 94@keyframes stretch-animate { 95 0% { 96 transform: scale(1, 1); 97 } 98 99 28% { 100 transform: scale(1.15, 0.85); 101 } 102 103 50% { 104 transform: scale(0.9, 1.1); 105 } 106 107 100% { 108 transform: scale(1, 1); 109 } 110} 111 112.socials { 113 position: fixed; 114 display: block; 115 left: 20px; 116 bottom: 20px; 117} 118 119.socials > a { 120 display: block; 121 width: 30px; 122 opacity: .2; 123 transform: scale(var(--scale, 0.8)); 124 transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91); 125} 126 127.socials > a:hover { 128 --scale: 1; 129} 130
MIT License