{"html":"

\n\n

\n \n

\n\n

\n \n

\n","css":"@keyframes stageBackground {\n 0%, 10%, 90%, 100% {\n background-color: #00B6BB;\n }\n\n 25%, 75% {\n background-color: #0094bd;\n }\n}\n\n@keyframes earthRotation {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes sunrise {\n 0%, 10%, 90%, 100% {\n box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3);\n }\n\n 25%, 75% {\n box-shadow: 0 0 0 0 #5ad6bd, 0 0 0 0 #4acead, 0 0 0 0 rgba(74, 206, 173, 0.6), 0 0 0 0 rgba(74, 206, 173, 0.3);\n }\n}\n\n@keyframes moonOrbit {\n 25% {\n transform: rotate(-60deg);\n }\n\n 50% {\n transform: rotate(-60deg);\n }\n\n 75% {\n transform: rotate(-120deg);\n }\n\n 0%, 100% {\n transform: rotate(-180deg);\n }\n}\n\n@keyframes nightTime {\n 0%, 90% {\n opacity: 0;\n }\n\n 50%, 75% {\n opacity: 1;\n }\n}\n\n@keyframes hotPan {\n 0%, 90% {\n background-color: #74667e;\n }\n\n 50%, 75% {\n background-color: #b2241c;\n }\n}\n\n@keyframes heat {\n 0%, 90% {\n box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.3);\n }\n\n 50%, 75% {\n box-shadow: inset 0 -2px 0 0 white;\n }\n}\n\n@keyframes smoke {\n 0%, 50%, 90%, 100% {\n opacity: 0;\n }\n\n 50%, 75% {\n opacity: 0.7;\n }\n}\n\n@keyframes fire {\n 0%, 90%, 100% {\n opacity: 0;\n }\n\n 50%, 75% {\n opacity: 1;\n }\n}\n\n@keyframes treeShake {\n 0% {\n transform: rotate(0deg);\n }\n\n 25% {\n transform: rotate(-2deg);\n }\n\n 40% {\n transform: rotate(4deg);\n }\n\n 50% {\n transform: rotate(-4deg);\n }\n\n 60% {\n transform: rotate(6deg);\n }\n\n 75% {\n transform: rotate(-6deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes fireParticles {\n 0% {\n height: 30%;\n opacity: 1;\n top: 75%;\n }\n\n 25% {\n height: 25%;\n opacity: 0.8;\n top: 40%;\n }\n\n 50% {\n height: 15%;\n opacity: 0.6;\n top: 20%;\n }\n\n 75% {\n height: 10%;\n opacity: 0.3;\n top: 0;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes fireLines {\n 0%, 25%, 75%, 100% {\n bottom: 0;\n }\n\n 50% {\n bottom: 5%;\n }\n}\n\n.scene {\n display: flex;\n margin: 0 auto 80px auto;\n justify-content: center;\n align-items: flex-end;\n width: 400px;\n height: 300px;\n position: relative;\n}\n\n.forest {\n display: flex;\n width: 75%;\n height: 90%;\n position: relative;\n}\n\n.tree {\n display: block;\n width: 50%;\n position: absolute;\n bottom: 0;\n opacity: 0.4;\n}\n\n.tree .branch {\n width: 80%;\n height: 0;\n margin: 0 auto;\n padding-left: 40%;\n padding-bottom: 50%;\n overflow: hidden;\n}\n\n.tree .branch:before {\n content: \"\";\n display: block;\n width: 0;\n height: 0;\n margin-left: -600px;\n border-left: 600px solid transparent;\n border-right: 600px solid transparent;\n border-bottom: 950px solid #000;\n}\n\n.tree .branch.branch-top {\n transform-origin: 50% 100%;\n animation: treeShake 0.5s linear infinite;\n}\n\n.tree .branch.branch-middle {\n width: 90%;\n padding-left: 45%;\n padding-bottom: 65%;\n margin: 0 auto;\n margin-top: -25%;\n}\n\n.tree .branch.branch-bottom {\n width: 100%;\n padding-left: 50%;\n padding-bottom: 80%;\n margin: 0 auto;\n margin-top: -40%;\n}\n\n.tree1 {\n width: 31%;\n}\n\n.tree1 .branch-top {\n transition-delay: 0.3s;\n}\n\n.tree2 {\n width: 39%;\n left: 9%;\n}\n\n.tree2 .branch-top {\n transition-delay: 0.4s;\n}\n\n.tree3 {\n width: 32%;\n left: 24%;\n}\n\n.tree3 .branch-top {\n transition-delay: 0.5s;\n}\n\n.tree4 {\n width: 37%;\n left: 34%;\n}\n\n.tree4 .branch-top {\n transition-delay: 0.6s;\n}\n\n.tree5 {\n width: 44%;\n left: 44%;\n}\n\n.tree5 .branch-top {\n transition-delay: 0.7s;\n}\n\n.tree6 {\n width: 34%;\n left: 61%;\n}\n\n.tree6 .branch-top {\n transition-delay: 0.2s;\n}\n\n.tree7 {\n width: 24%;\n left: 76%;\n}\n\n.tree7 .branch-top {\n transition-delay: 0.1s;\n}\n\n.tent {\n width: 60%;\n height: 25%;\n position: absolute;\n bottom: -0.5%;\n right: 15%;\n z-index: 1;\n text-align: right;\n}\n\n.roof {\n display: inline-block;\n width: 45%;\n height: 100%;\n margin-right: 10%;\n position: relative;\n /*bottom: 0;\n right: 9%;*/\n z-index: 1;\n border-top: 4px solid #4D4454;\n border-right: 4px solid #4D4454;\n border-left: 4px solid #4D4454;\n border-top-right-radius: 6px;\n transform: skew(30deg);\n box-shadow: inset -3px 3px 0px 0px #F7B563;\n /*background: linear-gradient(\n to bottom, \n rgba(246,212,132,1) 0%,\n rgba(246,212,132,1) 24%,\n rgba(#F0B656,1) 25%,\n rgba(#F0B656,1) 74%,\n rgba(235,151,53,1) 75%,\n rgba(235,151,53,1) 100%\n );*/\n background: #f6d484;\n}\n\n.roof:before {\n content: \"\";\n width: 70%;\n height: 70%;\n position: absolute;\n top: 15%;\n left: 15%;\n z-index: 0;\n border-radius: 10%;\n background-color: #E78C20;\n}\n\n.roof:after {\n content: \"\";\n height: 75%;\n width: 100%;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: 1;\n background: linear-gradient(to bottom, rgba(231, 140, 32, 0.4) 0%, rgba(231, 140, 32, 0.4) 64%, rgba(231, 140, 32, 0.8) 65%, rgba(231, 140, 32, 0.8) 100%);\n}\n\n.roof-border-left {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n width: 1%;\n height: 125%;\n position: absolute;\n top: 0;\n left: 35.7%;\n z-index: 1;\n transform-origin: 50% 0%;\n transform: rotate(35deg);\n}\n\n.roof-border-left .roof-border {\n display: block;\n width: 100%;\n border-radius: 2px;\n border: 2px solid #4D4454;\n}\n\n.roof-border-left .roof-border1 {\n height: 40%;\n}\n\n.roof-border-left .roof-border2 {\n height: 10%;\n}\n\n.roof-border-left .roof-border3 {\n height: 40%;\n}\n\n.door {\n width: 55px;\n height: 92px;\n position: absolute;\n bottom: 2%;\n overflow: hidden;\n z-index: 0;\n transform-origin: 0 105%;\n}\n\n.left-door {\n transform: rotate(35deg);\n position: absolute;\n left: 13.5%;\n bottom: -3%;\n z-index: 0;\n}\n\n.left-door .left-door-inner {\n width: 100%;\n height: 100%;\n transform-origin: 0 105%;\n transform: rotate(-35deg);\n position: absolute;\n top: 0;\n overflow: hidden;\n background-color: #EDDDC2;\n}\n\n.left-door .left-door-inner:before {\n content: \"\";\n width: 15%;\n height: 100%;\n position: absolute;\n top: 0;\n right: 0;\n background: repeating-linear-gradient(#D4BC8B, #D4BC8B 4%, #E0D2A8 5%, #E0D2A8 10%);\n}\n\n.left-door .left-door-inner:after {\n content: \"\";\n width: 50%;\n height: 100%;\n position: absolute;\n top: 15%;\n left: 10%;\n transform: rotate(25deg);\n background-color: #fff;\n}\n\n.right-door {\n height: 89px;\n right: 21%;\n transform-origin: 0 105%;\n transform: rotate(-30deg) scaleX(-1);\n position: absolute;\n bottom: -3%;\n z-index: 0;\n}\n\n.right-door .right-door-inner {\n width: 100%;\n height: 100%;\n transform-origin: 0 120%;\n transform: rotate(-30deg);\n position: absolute;\n bottom: 0px;\n overflow: hidden;\n background-color: #EFE7CF;\n}\n\n.right-door .right-door-inner:before {\n content: \"\";\n width: 50%;\n height: 100%;\n position: absolute;\n top: 15%;\n right: -28%;\n z-index: 1;\n transform: rotate(15deg);\n background-color: #524A5A;\n}\n\n.right-door .right-door-inner:after {\n content: \"\";\n width: 50%;\n height: 100%;\n position: absolute;\n top: 15%;\n right: -20%;\n transform: rotate(20deg);\n background-color: #fff;\n}\n\n.floor {\n width: 80%;\n position: absolute;\n right: 10%;\n bottom: 0;\n z-index: 1;\n}\n\n.floor .ground {\n position: absolute;\n border-radius: 2px;\n border: 2px solid #4D4454;\n}\n\n.floor .ground.ground1 {\n width: 65%;\n left: 0;\n}\n\n.floor .ground.ground2 {\n width: 30%;\n right: 0;\n}\n\n.fireplace {\n display: block;\n width: 24%;\n height: 20%;\n position: absolute;\n left: 5%;\n}\n\n.fireplace:before {\n content: \"\";\n display: block;\n width: 8%;\n position: absolute;\n bottom: -4px;\n left: 2%;\n border-radius: 2px;\n border: 2px solid #4D4454;\n background: #4D4454;\n}\n\n.fireplace .support {\n display: block;\n height: 105%;\n width: 2px;\n position: absolute;\n bottom: -5%;\n left: 10%;\n border: 2px solid #4D4454;\n}\n\n.fireplace .support:before {\n content: \"\";\n width: 100%;\n height: 15%;\n position: absolute;\n top: -18%;\n left: -4px;\n border-radius: 2px;\n border: 2px solid #4D4454;\n transform-origin: 100% 100%;\n transform: rotate(45deg);\n}\n\n.fireplace .support:after {\n content: \"\";\n width: 100%;\n height: 15%;\n position: absolute;\n top: -18%;\n left: 0px;\n border-radius: 2px;\n border: 2px solid #4D4454;\n transform-origin: 0 100%;\n transform: rotate(-45deg);\n}\n\n.fireplace .support:nth-child(1) {\n left: 85%;\n}\n\n.fireplace .bar {\n width: 100%;\n height: 2px;\n border-radius: 2px;\n border: 2px solid #4D4454;\n}\n\n.fireplace .hanger {\n display: block;\n width: 2px;\n height: 25%;\n margin-left: -4px;\n position: absolute;\n left: 50%;\n border: 2px solid #4D4454;\n}\n\n.fireplace .pan {\n display: block;\n width: 25%;\n height: 50%;\n border-radius: 50%;\n border: 4px solid #4D4454;\n position: absolute;\n top: 25%;\n left: 35%;\n overflow: hidden;\n animation: heat 5s linear infinite;\n}\n\n.fireplace .pan:before {\n content: \"\";\n display: block;\n height: 53%;\n width: 100%;\n position: absolute;\n bottom: 0;\n z-index: -1;\n border-top: 4px solid #4D4454;\n background-color: #74667e;\n animation: hotPan 5s linear infinite;\n}\n\n.fireplace .smoke {\n display: block;\n width: 20%;\n height: 25%;\n position: absolute;\n top: 25%;\n left: 37%;\n background-color: white;\n filter: blur(5px);\n animation: smoke 5s linear infinite;\n}\n\n.fireplace .fire {\n display: block;\n width: 25%;\n height: 120%;\n position: absolute;\n bottom: 0;\n left: 33%;\n z-index: 1;\n animation: fire 5s linear infinite;\n}\n\n.fireplace .fire:before {\n content: \"\";\n display: block;\n width: 100%;\n height: 2px;\n position: absolute;\n bottom: -4px;\n z-index: 1;\n border-radius: 2px;\n border: 1px solid #efb54a;\n background-color: #efb54a;\n}\n\n.fireplace .fire .line {\n display: block;\n width: 2px;\n height: 100%;\n position: absolute;\n bottom: 0;\n animation: fireLines 1s linear infinite;\n}\n\n.fireplace .fire .line2 {\n left: 50%;\n margin-left: -1px;\n animation-delay: 0.3s;\n}\n\n.fireplace .fire .line3 {\n right: 0;\n animation-delay: 0.5s;\n}\n\n.fireplace .fire .line .particle {\n height: 10%;\n position: absolute;\n top: 100%;\n z-index: 1;\n border-radius: 2px;\n border: 2px solid #efb54a;\n animation: fireParticles 0.5s linear infinite;\n}\n\n.fireplace .fire .line .particle1 {\n animation-delay: 0.1s;\n}\n\n.fireplace .fire .line .particle2 {\n animation-delay: 0.3s;\n}\n\n.fireplace .fire .line .particle3 {\n animation-delay: 0.6s;\n}\n\n.fireplace .fire .line .particle4 {\n animation-delay: 0.9s;\n}\n\n.time-wrapper {\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n overflow: hidden;\n}\n\n.time {\n display: block;\n width: 100%;\n height: 200%;\n position: absolute;\n transform-origin: 50% 50%;\n transform: rotate(270deg);\n animation: earthRotation 5s linear infinite;\n}\n\n.time .day {\n display: block;\n width: 20px;\n height: 20px;\n position: absolute;\n top: 20%;\n left: 40%;\n border-radius: 50%;\n box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3);\n animation: sunrise 5s ease-in-out infinite;\n background-color: #ef9431;\n}\n\n.time .night {\n animation: nightTime 5s ease-in-out infinite;\n}\n\n.time .night .star {\n display: block;\n width: 4px;\n height: 4px;\n position: absolute;\n bottom: 10%;\n border-radius: 50%;\n background-color: #fff;\n}\n\n.time .night .star-big {\n width: 6px;\n height: 6px;\n}\n\n.time .night .star1 {\n right: 23%;\n bottom: 25%;\n}\n\n.time .night .star2 {\n right: 35%;\n bottom: 18%;\n}\n\n.time .night .star3 {\n right: 47%;\n bottom: 25%;\n}\n\n.time .night .star4 {\n right: 22%;\n bottom: 20%;\n}\n\n.time .night .star5 {\n right: 18%;\n bottom: 30%;\n}\n\n.time .night .star6 {\n right: 60%;\n bottom: 20%;\n}\n\n.time .night .star7 {\n right: 70%;\n bottom: 23%;\n}\n\n.time .night .moon {\n display: block;\n width: 25px;\n height: 25px;\n position: absolute;\n bottom: 22%;\n right: 33%;\n border-radius: 50%;\n transform: rotate(-60deg);\n box-shadow: 9px 9px 3px 0 white;\n filter: blur(1px);\n animation: moonOrbit 5s ease-in-out infinite;\n}\n\n.time .night .moon:before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n bottom: -9px;\n left: 9px;\n border-radius: 50%;\n box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05), 0 0 0 15px rgba(255, 255, 255, 0.05), 0 0 0 25px rgba(255, 255, 255, 0.05), 0 0 0 35px rgba(255, 255, 255, 0.05);\n background-color: rgba(255, 255, 255, 0.2);\n}"}

stupid-mouse-29

👁 实时预览

📝 源代码