{"html":"

","css":"@keyframes snow {\n 0% {\n opacity: 0;\n transform: translateY(0px);\n }\n\n 20% {\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n transform: translateY(650px);\n }\n}\n\n@keyframes astronaut {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.box-of-star1,\n.box-of-star2,\n.box-of-star3,\n.box-of-star4 {\n width: 100%;\n position: absolute;\n z-index: 10;\n left: 0;\n top: 0;\n transform: translateY(0px);\n height: 700px;\n}\n\n.box-of-star1 {\n animation: snow 5s linear infinite;\n}\n\n.box-of-star2 {\n animation: snow 5s -1.64s linear infinite;\n}\n\n.box-of-star3 {\n animation: snow 5s -2.30s linear infinite;\n}\n\n.box-of-star4 {\n animation: snow 5s -3.30s linear infinite;\n}\n\n.star {\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background-color: #FFF;\n position: absolute;\n z-index: 10;\n opacity: 0.7;\n}\n\n.star:before {\n content: \"\";\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: #FFF;\n position: absolute;\n z-index: 10;\n top: 80px;\n left: 70px;\n opacity: .7;\n}\n\n.star:after {\n content: \"\";\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #FFF;\n position: absolute;\n z-index: 10;\n top: 8px;\n left: 170px;\n opacity: .9;\n}\n\n.star-position1 {\n top: 30px;\n left: 20px;\n}\n\n.star-position2 {\n top: 110px;\n left: 250px;\n}\n\n.star-position3 {\n top: 60px;\n left: 570px;\n}\n\n.star-position4 {\n top: 120px;\n left: 900px;\n}\n\n.star-position5 {\n top: 20px;\n left: 1120px;\n}\n\n.star-position6 {\n top: 90px;\n left: 1280px;\n}\n\n.star-position7 {\n top: 30px;\n left: 1480px;\n}\n\n.astronaut {\n width: 250px;\n height: 300px;\n position: absolute;\n z-index: 11;\n top: calc(50% - 150px);\n left: calc(50% - 125px);\n animation: astronaut 5s linear infinite;\n}\n\n.schoolbag {\n width: 100px;\n height: 150px;\n position: absolute;\n z-index: 1;\n top: calc(50% - 75px);\n left: calc(50% - 50px);\n background-color: #94b7ca;\n border-radius: 50px 50px 0 0 / 30px 30px 0 0;\n}\n\n.head {\n width: 97px;\n height: 80px;\n position: absolute;\n z-index: 3;\n background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);\n border-radius: 50%;\n top: 34px;\n left: calc(50% - 47.5px);\n}\n\n.head:after {\n content: \"\";\n width: 60px;\n height: 50px;\n position: absolute;\n top: calc(50% - 25px);\n left: calc(50% - 30px);\n background: -webkit-linear-gradient(top, #15aece 0%, #15aece 50%, #0391bf 50%, #0391bf 100%);\n border-radius: 15px;\n}\n\n.head:before {\n content: \"\";\n width: 12px;\n height: 25px;\n position: absolute;\n top: calc(50% - 12.5px);\n left: -4px;\n background-color: #618095;\n border-radius: 5px;\n box-shadow: 92px 0px 0px #618095;\n}\n\n.body {\n width: 85px;\n height: 100px;\n position: absolute;\n z-index: 2;\n background-color: #fffbff;\n border-radius: 40px / 20px;\n top: 105px;\n left: calc(50% - 41px);\n background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);\n}\n\n.panel {\n width: 60px;\n height: 40px;\n position: absolute;\n top: 20px;\n left: calc(50% - 30px);\n background-color: #b7cceb;\n}\n\n.panel:before {\n content: \"\";\n width: 30px;\n height: 5px;\n position: absolute;\n top: 9px;\n left: 7px;\n background-color: #fbfdfa;\n box-shadow: 0px 9px 0px #fbfdfa, 0px 18px 0px #fbfdfa;\n}\n\n.panel:after {\n content: \"\";\n width: 8px;\n height: 8px;\n position: absolute;\n top: 9px;\n right: 7px;\n background-color: #fbfdfa;\n border-radius: 50%;\n box-shadow: 0px 14px 0px 2px #fbfdfa;\n}\n\n.arm {\n width: 80px;\n height: 30px;\n position: absolute;\n top: 121px;\n z-index: 2;\n}\n\n.arm-left {\n left: 30px;\n background-color: #e3e8eb;\n border-radius: 0 0 0 39px;\n}\n\n.arm-right {\n right: 30px;\n background-color: #fbfdfa;\n border-radius: 0 0 39px 0;\n}\n\n.arm-left:before,\n.arm-right:before {\n content: \"\";\n width: 30px;\n height: 70px;\n position: absolute;\n top: -40px;\n}\n\n.arm-left:before {\n border-radius: 50px 50px 0px 120px / 50px 50px 0 110px;\n left: 0;\n background-color: #e3e8eb;\n}\n\n.arm-right:before {\n border-radius: 50px 50px 120px 0 / 50px 50px 110px 0;\n right: 0;\n background-color: #fbfdfa;\n}\n\n.arm-left:after,\n.arm-right:after {\n content: \"\";\n width: 30px;\n height: 10px;\n position: absolute;\n top: -24px;\n}\n\n.arm-left:after {\n background-color: #6e91a4;\n left: 0;\n}\n\n.arm-right:after {\n right: 0;\n background-color: #b6d2e0;\n}\n\n.leg {\n width: 30px;\n height: 40px;\n position: absolute;\n z-index: 2;\n bottom: 70px;\n}\n\n.leg-left {\n left: 76px;\n background-color: #e3e8eb;\n transform: rotate(20deg);\n}\n\n.leg-right {\n right: 73px;\n background-color: #fbfdfa;\n transform: rotate(-20deg);\n}\n\n.leg-left:before,\n.leg-right:before {\n content: \"\";\n width: 50px;\n height: 25px;\n position: absolute;\n bottom: -26px;\n}\n\n.leg-left:before {\n left: -20px;\n background-color: #e3e8eb;\n border-radius: 30px 0 0 0;\n border-bottom: 10px solid #6d96ac;\n}\n\n.leg-right:before {\n right: -20px;\n background-color: #fbfdfa;\n border-radius: 0 30px 0 0;\n border-bottom: 10px solid #b0cfe4;\n}"}

new-deer-97

👁 实时预览

📝 源代码