Radio-buttons | yaroslavas2001 white ape 33
html公开前 25 行,完整代码需登录
<div class="radio-input">
<svg class="top_hand" width="60" height="29" viewBox="0 0 137 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.809473 14.0106C0.932949 14.8606 1.71126 16.7901 2.43332 18.0113C4.22178 21.0082 7.38337 24.6271 10.7735 27.5176C16.1188 32.0703 24.3802 37.5687 29.6583 40.0845C30.5268 40.494 31.1664 40.9069 31.5241 41.2887C32.527 42.3438 34.6516 44.1531 35.766 44.8951C39.744 47.5533 43.742 48.2385 48.5595 47.1041C50.5552 46.6327 51.7022 46.482 52.5699 46.6117C53.9507 46.8006 56.6314 48.0174 60.2095 50.055C66.6117 53.7191 68.4207 54.6602 70.9203 55.6544C72.5949 56.3124 74.8008 56.8376 76.0316 56.8845C78.8436 56.9853 80.9446 55.6606 82.0853 53.0743C82.2485 52.6812 82.3455 52.3437 82.285 52.297C82.2195 52.2699 82.3099 51.8373 82.4907 51.3349C83.1969 49.3516 83.21 48.4539 82.569 47.1188C82.0646 46.0986 81.2338 45.1394 79.5862 43.6909C78.0597 42.3355 76.0996 41.0553 72.9307 39.3195C69.3327 37.3596 68.0467 36.8015 66.2001 36.41C65.2768 36.2143 64.5334 36.044 64.5311 36.0124C64.5483 35.9857 66.0455 35.4796 67.8741 34.8928C71.4802 33.7165 71.8754 33.5488 72.2467 32.9502C72.4581 32.6109 72.5192 32.5748 72.5986 32.7092C72.7502 32.9656 72.535 33.5214 72.1259 33.9446C71.8173 34.2589 71.2978 34.4672 69.2277 35.1473C67.8354 35.6079 66.6552 36.009 66.5942 36.0451C66.5331 36.0813 67.2471 36.2854 68.1777 36.4933C69.5479 36.8038 70.2469 37.0663 71.9177 37.9408C73.0476 38.5417 74.689 39.4501 75.5713 39.9667C77.8473 41.3074 78.9672 41.5847 81.4477 41.4036C82.8522 41.2983 83.912 41.0837 86.0059 40.4719C88.8482 39.6484 90.6774 39.3414 92.5312 39.3826L93.1175 39.3985L92.3168 39.0479C84.6062 35.6795 84.2542 35.558 83.0744 35.5139C82.4881 35.4979 81.2317 35.2684 80.2651 34.9994C79.3107 34.7232 78.0059 34.4399 77.3713 34.3701C75.1711 34.1053 73.7853 33.5733 72.9323 32.6602C72.6929 32.4227 72.4591 32.083 72.4213 31.9075C72.3546 31.6833 72.4734 31.7449 72.9355 32.1639C73.9272 33.0608 75.4808 33.6255 77.8559 33.9353C78.3372 33.9967 78.9374 34.1198 79.1728 34.2114C80.2916 34.6541 82.4781 35.1743 83.3708 35.2068C84.5067 35.2603 85.259 35.5572 91.5349 38.4224C93.7232 39.4195 95.6077 40.3489 95.731 40.4738C95.8348 40.5937 96.4718 41.4201 97.1377 42.2955C99.4103 45.3028 102.052 48.4877 103.222 49.6582C104.658 51.0836 105.473 52.5462 106.774 56.1118C107.833 58.9629 108.898 60.5415 110.786 62.0622C113.125 63.9264 116.207 64.428 117.818 63.1951C118.62 62.5725 119.199 61.7685 119.178 61.2866C119.168 61.0456 118.795 60.2768 118.136 59.1339C117.171 57.4464 117.085 57.2171 116.424 54.8723C115.508 51.6231 114.555 48.561 114.234 47.7949C114.095 47.4485 107.6 38.0601 107.579 37.9408C107.513 37.6338 114.925 47.3201 115.823 48.1409C117.373 49.5645 118.116 50.5425 120.286 53.9896C122.67 57.7714 122.934 58.0772 124.862 59.3597C126.41 60.3891 128.008 60.9444 129.649 61.045C131.182 61.1279 132.302 60.8772 133.131 60.2719C133.869 59.7365 134.747 58.657 134.932 58.0207C135.106 57.4233 134.812 56.8715 133.597 55.5961C132.993 54.9644 132.464 54.2384 131.822 53.1515L125.082 44.1252L119.178 37.2685L124.126 42.2172L129.386 48.7511L131.537 50.6875C132.398 51.0102 133.908 51.0336 134.932 50.6875C135.367 50.2815 136.36 48.8694 136.434 48.3808C136.47 48.162 136.368 47.9911 136.011 47.6092C135.75 47.335 135.131 46.679 134.643 46.16C133.991 45.4746 133.224 44.4283 131.869 42.3611C128.817 37.6724 127.371 35.9234 123.898 32.6699C122.795 31.6409 120.06 29.0223 117.828 26.8644C113.781 22.9454 112.83 22.0901 111.744 21.397C110.201 20.4309 108.323 20.3214 102.186 20.8683L99.7658 21.096L97.9885 20.5152C94.9292 19.5222 93.1102 18.62 89.0707 16.0806C86.216 14.2909 84.2393 13.3171 82.5487 12.8829C80.229 12.2767 78.75 12.2282 75.0954 12.6256C71.8328 12.989 69.8519 13.0395 65.3055 12.8764C63.3108 12.8197 60.4033 12.8083 58.8749 12.8714C55.4434 13.005 54.609 12.9875 52.3727 12.6616C46.1717 11.7628 40.0645 8.76483 31.9895 2.66172L29.6384 0.887458L27.3346 1.59036C19.2897 4.03973 11.8701 7.24008 4.10989 11.5647L0.732716 13.4627L0.809473 14.0106ZM16.3102 27.2929C21.7758 33.1919 25.6752 36.7206 28.0205 37.872L28.7457 38.2343L27.9395 37.9858C26.8468 37.643 24.809 36.3428 23.1925 34.9747C20.5598 32.7242 18.148 30.1782 14.616 25.9049C11.376 21.9862 11.531 22.1089 16.3102 27.2929ZM134.815 47.7889C135.786 48.2039 135.812 48.2211 135.098 48.017C134.676 47.8877 134.113 47.6602 133.861 47.5126C133.23 47.1436 133.529 47.2307 134.815 47.7889Z" fill="url(#paint0_linear_16_22)">
</path>
<defs>
<linearGradient id="paint0_linear_16_22" x1="116.5" y1="66.5" x2="18.5" y2="-19.5" gradientUnits="userSpaceOnUse">
<stop stop-color="white"></stop>
<stop offset="1" stop-color="#212121" stop-opacity="0.3"></stop>
</linearGradient>
</defs>
</svg>
<div class="radio_item">
<input type="radio" id="value-1" name="value-radio" value="Earth" class="radio">
<div class="sphere_lines earth_input"></div>
<div class="sphere_lines_back earth_input"></div>
<svg class="sphere earth_input_planet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50" viewBox="-1.2 -1.2 2.2 2.2">
<g stroke-width="0.009">
<circle r="1"></circle>
<g id="grid">
<path d="M0 1A1 1 0 0 1 0-1">
<animateTransform attributeName="transform" type="scale" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>
</path>
<path d="M0 1A1 1 0 0 1 0-1">
<animateTransform attributeName="transform" type="scale" begin="-0.5s" dur="5s" values="1 1; -1 1" repeatCount="indefinite" keySplines="0.64 0 0.36 1"></animateTransform>