{"html":"

\n \n Bubble 1\n

\n \n Bubble 2\n

\n","css":".Radio input[type=\"radio\"] {\n position: absolute;\n left: -100px;\n}\n.Radio input[type=\"radio\"] + label {\n position: relative;\n display: block;\n line-height: 3rem;\n cursor: pointer;\n white-space: nowrap;\n color: #61cea5;\n}\n\n.Radio input[type=\"radio\"] + label::before,\n.Radio input[type=\"radio\"] + label::after {\n content: \"\";\n display: inline-block;\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n transition: 0.5s;\n}\n\n.Radio input[type=\"radio\"] + label {\n padding-left: 3rem;\n}\n\n.Radio input[type=\"radio\"] + label::before {\n width: 2rem;\n aspect-ratio: 1 / 1;\n border-radius: 50%;\n background: #61cea5;\n}\n\n.Radio input[type=\"radio\"] + label::after {\n left: 0.2rem;\n width: 1.4rem;\n transform: translateY(-50%) scale(0);\n}\n\n.Radio input[type=\"radio\"]:not(:checked) + label::after {\n animation: radio 0.5s linear;\n}\n\n.Radio input[type=\"radio\"]:checked + label::after {\n transform: translateY(-50%) scale(1);\n}\n\n.Radio input[type=\"radio\"] + label::after {\n aspect-ratio: 1 / 1;\n border: 0.1rem solid #fff;\n border-radius: 50%;\n background: radial-gradient(circle at 70% 30%, #fff, rgba(0, 0, 0, 0) 25%),\n radial-gradient(\n circle at 60% 55%,\n rgba(0, 0, 0, 0) 60%,\n rgba(255, 0, 255, 0.8) 100%\n ),\n radial-gradient(\n circle at 50% 50%,\n rgba(0, 0, 0, 0) 40%,\n rgba(0, 255, 255, 0.2) 60%,\n rgba(0, 0, 0, 0) 68%\n ),\n radial-gradient(\n circle at 50% 55%,\n rgba(0, 0, 0, 0) 35%,\n rgba(255, 255, 0, 0.2) 45%,\n rgba(0, 0, 0, 0) 55%\n );\n}\n\n@keyframes radio {\n 0% {\n transform: translateY(-50%) scale(1);\n }\n 100% {\n transform: translateY(-50%) scale(1.7);\n }\n}\n"}

tiny-tiger-4

👁 实时预览

📝 源代码