{"html":"

\n \n

\nLoading Page.. Please Wait!\n

","css":".master-container {\n margin: 0;\n padding: 20px 40px;\n background-color: #131516;\n display: grid;\n border-radius: 13px;\n border: 1px solid #2c2d2e;\n transform: scale(0.7);\n}\n\n.container {\n width: 300px;\n height: 300px;\n position: relative;\n margin: auto;\n border-radius: 50%;\n border: 2px solid white;\n overflow: hidden;\n}\n\n.crescent {\n position: relative;\n height: 50px;\n width: 50px;\n border-radius: 50%;\n left: calc(50% - 25px);\n top: 12px;\n overflow: hidden;\n animation: rotate 3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.crescent span:nth-child(2) {\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n box-shadow: inset 0 0 0 2px white;\n border-radius: 50%;\n}\n\n.crescent span:nth-child(1) {\n background-color: #131516;\n position: absolute;\n left: 40%;\n display: block;\n width: calc(70% - 6px);\n height: calc(70% - 6px);\n box-shadow: inset 0 0 0 2px white;\n border-radius: 50%;\n z-index: 9;\n}\n\n.star {\n position: absolute;\n overflow: hidden;\n border-radius: 50%;\n height: 20px;\n width: 20px;\n}\n\n.star span:nth-child(1)::before {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 0% 100% 10%;\n display: block;\n left: -3px;\n top: -3px;\n position: absolute;\n}\n\n.star span:nth-child(1)::after {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 100% 0% 0%;\n display: block;\n left: -3px;\n bottom: -3px;\n position: absolute;\n}\n\n.star span:nth-child(2)::before {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-right-color: transparent;\n border-radius: 0% 0% 0% 100%;\n display: block;\n right: -3px;\n top: -3px;\n position: absolute;\n}\n\n.star span:nth-child(2)::after {\n content: \"\";\n border: 2px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-right-color: transparent;\n border-radius: 100% 0% 0% 0%;\n display: block;\n right: -3px;\n bottom: -3px;\n position: absolute;\n}\n\n.small-star {\n position: absolute;\n overflow: hidden;\n border-radius: 50%;\n height: 12px;\n width: 12px;\n}\n\n.small-star span:nth-child(1)::before {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 0% 100% 10%;\n display: block;\n left: -2px;\n top: -2px;\n position: absolute;\n}\n\n.small-star span:nth-child(1)::after {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-left-color: transparent;\n border-radius: 0% 100% 0% 0%;\n display: block;\n left: -2px;\n bottom: -2px;\n position: absolute;\n}\n\n.small-star span:nth-child(2)::before {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-top-color: transparent;\n border-right-color: transparent;\n border-radius: 0% 0% 0% 100%;\n display: block;\n right: -2px;\n top: -2px;\n position: absolute;\n}\n\n.small-star span:nth-child(2)::after {\n content: \"\";\n border: 1.5px solid white;\n height: 50%;\n width: 50%;\n border-bottom-color: transparent;\n border-right-color: transparent;\n border-radius: 100% 0% 0% 0%;\n display: block;\n right: -2px;\n bottom: -2px;\n position: absolute;\n}\n\n.s1 {\n left: 60px;\n top: 50px;\n animation: glow 1.1s 0.9s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s2 {\n right: 35px;\n bottom: 155px;\n animation: glow 1.3s 0.5s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s3 {\n left: calc(50% - 10px);\n top: 75px;\n animation: glow 1.5s 0.3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s4 {\n left: 35px;\n bottom: 155px;\n animation: glow 3s 0.7s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.s5 {\n right: 60px;\n top: 50px;\n animation: glow 2s 1.2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss1 {\n right: 15px;\n bottom: 130px;\n animation: glow 2s 1s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss2 {\n left: 15px;\n bottom: 130px;\n animation: glow 1s 0s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss3 {\n left: 35px;\n bottom: 195px;\n animation: glow 1.9s 0.1s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss4 {\n right: 35px;\n bottom: 195px;\n animation: glow 1.6s 0.9s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss5 {\n left: 100px;\n bottom: 180px;\n animation: glow 1s 0.5s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss6 {\n right: 100px;\n bottom: 180px;\n animation: glow 1.7s 0.6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss7 {\n right: 90px;\n top: 30px;\n animation: glow 0.8s 0.8s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.ss8 {\n left: 90px;\n top: 30px;\n animation: glow 1.8s 0.3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite;\n}\n\n.hill {\n display: block;\n width: 140%;\n height: 100%;\n border: 2px solid white;\n border-radius: 50%;\n bottom: -40%;\n position: relative;\n left: -20%;\n background-size: 3%;\n background-repeat: repeat;\n opacity: 0.7;\n}\n\n.fire-pit {\n width: 18px;\n height: 30px;\n position: absolute;\n left: calc(50% - 9px);\n bottom: 25px;\n z-index: 99;\n}\n\n.fire {\n width: 0;\n height: 0;\n border: 9px solid transparent;\n border-bottom: 18px solid #ffffff;\n position: relative;\n top: -9px;\n}\n\n.fire:after {\n content: \"\";\n position: absolute;\n left: -9px;\n top: 18px;\n width: 0;\n height: 0;\n border: 9px solid transparent;\n border-top: 9px solid #ffffff;\n}\n\n.inner-fire {\n width: 0;\n height: 0;\n border: 4.5px solid transparent;\n border-bottom: 9px solid #131516;\n top: 4.5px;\n position: absolute;\n z-index: 9;\n left: -4.5px;\n}\n\n.inner-fire:after {\n content: \"\";\n position: absolute;\n left: -4.5px;\n top: 9px;\n width: 0;\n height: 0;\n border: 4.5px solid transparent;\n border-top: 6px solid #131516;\n}\n\n.log1 {\n background-color: white;\n height: 2px;\n transform: rotate(35deg);\n transform-origin: center;\n position: relative;\n left: -3px;\n bottom: -1.5px;\n}\n\n.log2 {\n background-color: white;\n height: 2px;\n transform: rotate(-35deg);\n transform-origin: center;\n left: 3px;\n position: relative;\n bottom: -0px;\n}\n\n.hut {\n width: 0;\n height: 0;\n border-left: 38px solid transparent;\n border-right: 38px solid transparent;\n border-bottom: 75px solid #131516;\n position: absolute;\n left: calc(50% - 37.6px);\n z-index: 11;\n bottom: 80px;\n transform: scale(1.3);\n}\n\n.hut hr:nth-child(1) {\n height: 0px;\n position: absolute;\n width: 75px;\n bottom: -75px;\n left: calc(50% - 37.6px);\n}\n\n.hut hr:nth-child(2) {\n height: 0px;\n position: absolute;\n width: 96px;\n bottom: -32px;\n left: -32px;\n transform: rotate(63.5deg);\n border: 1px solid white;\n}\n\n.hut hr:nth-child(3) {\n height: 0px;\n position: absolute;\n width: 96px;\n bottom: -32px;\n right: -32px;\n transform: rotate(-63.5deg);\n border: 1px solid white;\n}\n\n.hut hr:nth-child(4) {\n height: 0px;\n position: absolute;\n width: 60px;\n bottom: -60px;\n left: -30px;\n border: 0.5px solid white;\n}\n\n.hut hr:nth-child(5) {\n height: 0px;\n position: absolute;\n width: 55px;\n bottom: -55px;\n left: -27.5px;\n border: 0.5px solid white;\n}\n\n.hut hr:nth-child(6) {\n height: 0px;\n position: absolute;\n width: 50px;\n bottom: -50px;\n left: -25px;\n border: 0.5px solid white;\n}\n\n.doorway {\n width: 0;\n height: 0;\n border-left: 22px solid transparent;\n border-right: 22px solid transparent;\n border-bottom: 42px solid #131516;\n position: relative;\n left: -22px;\n bottom: -32px;\n}\n\n.doorway::before {\n content: \"\";\n border-left: 1px solid white;\n width: 0px;\n height: 48px;\n display: inline-block;\n transform: rotate(-27deg);\n left: 11px;\n position: absolute;\n bottom: -45px;\n}\n\n.doorway::after {\n content: \"\";\n border-left: 1px solid white;\n width: 0px;\n height: 48px;\n display: inline-block;\n transform: rotate(27deg);\n left: -11px;\n position: absolute;\n bottom: -45px;\n}\n\n.doorway > hr.split {\n height: 44px;\n width: 1px;\n position: absolute;\n left: 0px;\n top: 0;\n display: inline-block;\n background-color: white;\n border: 0;\n}\n\n/* Trees */\n.tree {\n position: absolute;\n width: 25px;\n height: 48px;\n z-index: 21;\n transform: scale(1.3);\n}\n\n.tree .trunc {\n height: 48px;\n width: 1px;\n background-color: white;\n left: 12.5px;\n position: absolute;\n margin-top: 1.5px;\n}\n\n.tree .leaves {\n height: 18px;\n width: 18px;\n transform: rotate(45deg);\n border-left: 1.5px solid white;\n border-top: 1.5px solid white;\n border-bottom: 0;\n border-right: 0;\n margin-bottom: -15px;\n margin-top: 5px;\n left: 4px;\n position: relative;\n}\n\n.one {\n left: 30px;\n bottom: 90px;\n}\n\n.two {\n right: 30px;\n bottom: 90px;\n}\n\n.three {\n left: 80px;\n bottom: 115px;\n}\n\n.four {\n right: 80px;\n bottom: 115px;\n}\n\n.loading-text {\n color: white;\n font-family: 'Inter', sans-serif;\n display: block;\n text-align: center;\n padding: 20px 0 0 0;\n opacity: 0.8;\n}\n\n@keyframes glow {\n 0% {\n transform: scale(0);\n }\n\n 50% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n\n 50% {\n transform: rotate(10deg);\n }\n\n 100% {\n transform: rota(0);\n }\n}"}

tame-wolverine-39

👁 实时预览

📝 源代码