{"html":"

\n \n

\n EARTH\n

\n \n

\n MARS\n

\n \n

\n MOON\n

","css":".radio-inputs {\n display: flex;\n flex-wrap: wrap;\n border-radius: 0.5rem;\n background-color: rgba(255, 255, 255, 0.074);\n box-sizing: border-box;\n box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);\n padding: 0.25rem;\n width: 210px;\n height: 40px;\n font-size: 14px;\n box-size: border-box;\n}\n\n.obj1 {\n content: '';\n position: absolute;\n width: 100px;\n height: 100px;\n filter: blur(4px);\n z-index: -5;\n background: linear-gradient(blue,rgb(224, 107, 224));\n border-radius: 50%;\n overflow: hidden;\n} /* adjust position accordingly */\n\n.obj2 {\n content: '';\n position: absolute;\n width: 80px;\n height: 80px;\n filter: blur(4px);\n z-index: -5;\n background: linear-gradient(red,orange);\n border-radius: 50%;\n} /* adjust position accordingly */\n\n.obj3 {\n content: '';\n position: absolute;\n width: 60px;\n height: 60px;\n filter: blur(4px);\n z-index: -5;\n background-color: grey;\n border-radius: 50%;\n} /* adjust position accordingly */\n\n.radio1 , .radio2 , .radio3 {\n flex: 1;\n width: 70px;\n height: 30px;\n}\n\n.radio1 input ,\n.radio2 input ,\n.radio3 input {\n width: 30px;\n height: 30px;\n appearance: none;\n z-index: 2;\n cursor: pointer;\n margin-left: 22px;\n}\n\n.radio1 .name ,\n\n.radio2 .name ,\n\n.radio3 .name {\n display: flex;\n position: relative;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n border: none;\n bottom: 2.6em;\n padding: .5rem 0;\n color: rgba(51, 65, 85, 1);\n transition: all .15s ease-in-out;\n font-weight: 200;\n height: 40px;\n z-index: -2;\n}\n\n.radio1 input:checked ~ .name {\n color: white;\n background: linear-gradient(blue,green);\n font-weight: 600;\n}\n\n.radio2 input:checked ~ .name {\n color: white;\n background: linear-gradient(red,orange);\n font-weight: 600;\n}\n\n.radio3 input:checked ~ .name {\n color: white;\n background-color: grey;\n font-weight: 600;\n}\n\n#one input:checked ~ .obj1,\n#two input:checked ~ .obj2 ,\n#three input:checked ~ .obj3 {\n animation: shake 1s;\n animation-fill-mode: forwards;\n}\n\n@keyframes shake {\n 0% {\n transform: translateX(0);\n }\n\n 10% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 20% {\n transform: translateX(5px) rotate(5deg);\n }\n\n 30% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 40% {\n transform: translateX(5px) rotate(5deg);\n }\n\n 50% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 60% {\n transform: translateX(5px) rotate(5deg);\n }\n\n 70% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 80% {\n transform: translateX(5px) rotate(5deg);\n }\n\n 90% {\n transform: translateX(-5px) rotate(-5deg);\n }\n\n 100% {\n transform: translateX(0) rotate(0);\n }\n}\n"}

nasty-octopus-47

👁 实时预览

📝 源代码