{"html":"

\n","css":".uverse-widget-container {\n background-color: #5a3410;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100%;\n width: 100%;\n padding: 40px 20px;\n box-sizing: border-box;\n overflow: hidden;\n border-radius: 12px;\n}\n\n#wrapper {\n width: 160px;\n}\n\n#button {\n display: block;\n width: 150px;\n height: 150px;\n background: #e9946d;\n border-radius: 75px;\n -moz-border-radius: 75px;\n box-shadow: -7px 0 0 #b25b25;\n -moz-box-shadow: -7px 0 0 0 #b25b25;\n -webkit-box-shadow: -7px 0 0 0 #b25b25;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n#button_inner {\n display: block;\n width: 100px;\n height: 100px;\n background: #e9946d;\n border-radius: 50px;\n -moz-border-radius: 50px;\n box-shadow: inset -7px 0 0 #b25b25;\n -moz-box-shadow: inset -7px 0 0 #b25b25;\n -webkit-box-shadow: inset -7px 0 0 #b25b25;\n position: relative;\n left: 25px;\n top: 25px;\n border: 2px solid #b25b25;\n}\n\n#button_inner ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n width: 60px;\n}\n\n#button_inner ul li {\n display: inline-block;\n width: 18px;\n height: 18px;\n margin: 4px;\n background: #5a3410;\n border-radius: 9px;\n -moz-border-radius: 9px;\n box-shadow: inset -3px 0 0 #b25b25;\n -moz-box-shadow: inset -3px 0 0 #b25b25;\n -webkit-box-shadow: inset -3px 0 0 #b25b25;\n position: relative;\n top: 22px;\n left: 20px;\n}\n\n#shadow {\n position: relative;\n height: 12px;\n width: 140px;\n top: 30px;\n left: 0px;\n background-image: -moz-radial-gradient(\n 50% 50%,\n ellipse closest-corner,\n rgba(41, 24, 8, 0.7),\n rgba(91, 53, 17, 0.7) 74%\n );\n background-image: -webkit-radial-gradient(\n 50% 50%,\n ellipse closest-corner,\n rgba(41, 24, 8, 0.7),\n rgba(91, 53, 17, 0.7) 74%\n );\n background-image: -o-radial-gradient(\n 50% 50%,\n ellipse closest-corner,\n rgba(41, 24, 8, 0.7),\n rgba(91, 53, 17, 0.7) 74%\n );\n background-image: -ms-radial-gradient(\n 50% 50%,\n ellipse closest-corner,\n rgba(41, 24, 8, 0.7),\n rgba(91, 53, 17, 0.7) 74%\n );\n background-image: radial-gradient(\n 50% 50%,\n ellipse closest-corner,\n rgba(41, 24, 8, 0.7),\n rgba(91, 53, 17, 0.7) 74%\n );\n transition: all 0.15s ease;\n}\n\n#button:active {\n box-shadow: -2px 0 0 #b25b25;\n -moz-box-shadow: -2px 0 0 0 #b25b25;\n -webkit-box-shadow: -2px 0 0 0 #b25b25;\n transform: translateX(-5px);\n}\n\n#wrapper:active #shadow {\n transform: scale(0.95) translateX(-3px);\n opacity: 0.8;\n}\n\n@keyframes spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.spin {\n animation: spin 8s linear infinite;\n}\n\n@-webkit-keyframes twist {\n from {\n -webkit-transform: scaleX(1);\n }\n to {\n -webkit-transform: scaleX(0.9);\n }\n}\n\n@keyframes twist {\n from {\n transform: scaleX(1);\n }\n to {\n transform: scaleX(0.9);\n }\n}\n\n.twist {\n -webkit-animation: twist 3s ease-in-out infinite;\n -webkit-animation-direction: alternate;\n animation: twist 3s ease-in-out infinite alternate;\n}\n"}

spotty-turtle-24

👁 实时预览

📝 源代码