{"html":"

\n","css":".spooky-house {\n position: relative;\n}\n\n.content-circle {\n position: relative;\n width: 450px;\n height: 450px;\n overflow: hidden;\n background-color: #212f3c;\n border-radius: 50%;\n -webkit-backface-visibility: hidden;\n -moz-backface-visibility: hidden;\n -webkit-transform: translate3d(0, 0, 0);\n -moz-transform: translate3d(0, 0, 0);\n}\n\n.content-circle:before {\n content: \"\";\n position: absolute;\n width: 450px;\n height: 200px;\n top: 300px;\n border-radius: 50% 50% 0 0;\n background-color: #000;\n}\n\n.house {\n position: absolute;\n width: 120px;\n height: 150px;\n background-color: black;\n left: 180px;\n top: 160px;\n transform: rotate(5deg);\n z-index: 2;\n}\n\n.house:before {\n content: \"\";\n position: absolute;\n width: 0;\n height: 0;\n border-bottom: 30px solid black;\n border-right: 50px solid transparent;\n left: 115px;\n top: 70px;\n transform: rotate(5deg);\n}\n\n.house:after {\n content: \"\";\n position: absolute;\n width: 5px;\n height: 65px;\n background-color: black;\n left: 145px;\n top: 95px;\n}\n\n.porch {\n position: absolute;\n width: 30px;\n height: 100px;\n background-color: black;\n left: -20px;\n top: 55px;\n transform: rotate(-10deg);\n}\n.porch:before {\n content: \"\";\n position: absolute;\n width: 0;\n height: 0;\n border-bottom: 20px solid black;\n border-left: 40px solid transparent;\n left: -35px;\n top: 45px;\n}\n\n.porch:after {\n content: \"\";\n position: absolute;\n position: absolute;\n width: 0;\n height: 0;\n border-left: 20px solid transparent;\n border-right: 20px solid transparent;\n border-bottom: 30px solid black;\n left: -5px;\n top: -25px;\n}\n\n.first-floor {\n position: absolute;\n transform: rotate(-10deg);\n background-color: black;\n width: 5px;\n height: 45px;\n left: -37px;\n top: 125px;\n}\n\n.first-floor:before {\n content: \"\";\n position: absolute;\n background-color: #000;\n width: 85px;\n height: 90px;\n top: -150px;\n left: 50px;\n}\n\n.first-floor:after {\n content: \"\";\n position: absolute;\n border-left: 52px solid transparent;\n border-right: 52px solid transparent;\n border-bottom: 50px solid black;\n top: -199px;\n left: 40px;\n}\n\n.second-floor {\n position: absolute;\n background-color: black;\n width: 35px;\n height: 100px;\n transform: rotate(3deg);\n top: -70px;\n left: 70px;\n}\n\n.second-floor:before {\n content: \"\";\n position: absolute;\n background-color: black;\n width: 20px;\n height: 100px;\n left: 33px;\n top: 40px;\n transform: rotate(-3deg);\n}\n\n.second-floor:after {\n content: \"\";\n position: absolute;\n width: 0;\n height: 0;\n border-left: 25px solid transparent;\n border-right: 25px solid transparent;\n border-bottom: 30px solid black;\n top: 12px;\n left: 15px;\n}\n\n.roof {\n position: absolute;\n width: 0;\n height: 0;\n border-left: 25px solid transparent;\n border-right: 25px solid transparent;\n border-bottom: 30px solid black;\n left: 65px;\n top: -95px;\n}\n\n.roof:before {\n content: \"\";\n position: absolute;\n width: 6px;\n height: 20px;\n background-color: black;\n top: 5px;\n left: 10px;\n box-shadow: 20px 35px black;\n}\n\n.roof:after {\n content: \"\";\n position: absolute;\n width: 6px;\n height: 20px;\n background-color: black;\n transform: rotate(-10deg);\n left: -110px;\n top: 35px;\n box-shadow: -27px 97px black;\n}\n\n.door {\n position: absolute;\n background-color: #ffd166;\n width: 30px;\n height: 50px;\n transform: rotate(-5deg);\n border-radius: 30px 30px 0 0;\n box-shadow: inset -10px 5px rgba(0, 0, 0, 0.5);\n top: 90px;\n left: 40px;\n}\n\n.door:before {\n content: \"\";\n position: absolute;\n background-color: #ffd166;\n border-radius: 30px 30px 0 0;\n box-shadow: inset -5px 2px rgba(0, 0, 0, 0.5);\n width: 20px;\n height: 30px;\n left: -40px;\n transform: rotate(-3deg);\n}\n\n.door:after {\n content: \"\";\n position: absolute;\n background-color: #ffd166;\n box-shadow: inset -5px 2px rgba(0, 0, 0, 0.5);\n border-radius: 30px 30px 0 0;\n width: 20px;\n height: 30px;\n left: 45px;\n transform: rotate(3deg);\n}\n\n.small-windows {\n position: absolute;\n background-color: #ffd166;\n border-radius: 30px 30px 0 0;\n width: 13px;\n height: 25px;\n left: 100px;\n top: -20px;\n box-shadow: -19px -40px #ffd166, inset -4px 2px rgba(0, 0, 0, 0.5);\n}\n\n.small-windows:before {\n content: \"\";\n position: absolute;\n background-color: #ffd166;\n border-radius: 30px 30px 0 0;\n width: 13px;\n height: 25px;\n transform: rotate(-7deg);\n left: -60px;\n top: 50px;\n box-shadow: -60px 20px #ffd166;\n}\n\n.big-window {\n position: absolute;\n background-color: #ffd166;\n border-radius: 30px 30px 0 0;\n transform: rotate(-7deg);\n width: 30px;\n height: 40px;\n top: -35px;\n left: 10px;\n}\n\n.big-window:before,\n.big-window:after {\n content: \"\";\n position: absolute;\n background-color: black;\n}\n\n.big-window:before {\n height: 40px;\n width: 2px;\n left: 15px;\n box-shadow: 13px 55px black, -47px 80px black, -32px 120px black;\n}\n\n.big-window:after {\n height: 2px;\n width: 40px;\n top: 22px;\n box-shadow: 10px 58px black, -45px 78px black, -30px 120px black;\n}\n\n.frames {\n position: absolute;\n width: 2px;\n height: 40px;\n background-color: black;\n top: -65px;\n left: 86.5px;\n box-shadow: 19px 40px black, 7px 150px black;\n}\n\n.frames:before {\n content: \"\";\n position: absolute;\n height: 2px;\n width: 30px;\n background-color: black;\n top: 17px;\n left: -10px;\n box-shadow: 10px 40px black, 5px 150px black;\n}\n\n.moon {\n position: absolute;\n width: 200px;\n height: 200px;\n border-radius: 50%;\n background-color: #95a5a6;\n z-index: 1;\n left: 80px;\n top: 40px;\n box-shadow: inset 7px -7px 0 rgba(0, 0, 0, 0.09);\n}\n\n.moon:before,\n.moon:after {\n content: \"\";\n position: absolute;\n border-radius: 50%;\n background-color: rgba(0, 0, 0, 0.09);\n box-shadow: inset -5px 5px 0 rgba(0, 0, 0, 0.09);\n}\n.moon:before {\n width: 30px;\n height: 30px;\n top: 50px;\n left: 45px;\n}\n\n.moon:after {\n width: 40px;\n height: 40px;\n top: 100px;\n left: 30px;\n}\n\n.rain {\n position: absolute;\n z-index: 5;\n}\n\n.rain:before {\n content: \"\";\n position: absolute;\n width: 450px;\n height: 450px;\n background: #fff;\n opacity: 0;\n animation: lighting 3s linear infinite;\n}\n\n.dropOne,\n.dropTwo,\n.dropThree,\n.dropFour,\n.dropFive {\n position: absolute;\n background-color: rgba(211, 211, 211, 0.3);\n height: 10px;\n width: 1px;\n top: 0;\n box-shadow: 0 -270px rgba(211, 211, 211, 0.3),\n -50px -50px rgba(211, 211, 211, 0.3), -50px -150px rgba(211, 211, 211, 0.3),\n 50px -395px rgba(211, 211, 211, 0.3), 50px -200px rgba(211, 211, 211, 0.3),\n 50px -100px rgba(211, 211, 211, 0.3), 100px -400px rgba(211, 211, 211, 0.3),\n 100px -320px rgba(211, 211, 211, 0.3), 100px -150px rgba(211, 211, 211, 0.3),\n 150px -200px rgba(211, 211, 211, 0.3), 200px -100px rgba(211, 211, 211, 0.3),\n 200px -370px rgba(211, 211, 211, 0.3), 250px -330px rgba(211, 211, 211, 0.3),\n 250px -220px rgba(211, 211, 211, 0.3), 300px -70px rgba(211, 211, 211, 0.3),\n 300px -140px rgba(211, 211, 211, 0.3), 300px -300px rgba(211, 211, 211, 0.3);\n}\n\n.dropOne {\n animation: rain 1.5s linear infinite;\n left: 100px;\n}\n\n.dropTwo {\n left: -50px;\n animation: rain 1.2s linear infinite;\n}\n\n.dropThree {\n left: 50px;\n animation: rain 1.7s linear infinite;\n}\n\n.dropFour {\n left: 150px;\n animation: rain 1.4s linear infinite;\n}\n\n.dropFive {\n left: 80px;\n animation: rain 1.3s linear infinite;\n}\n\n@keyframes rain {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(1000px);\n }\n}\n\n@keyframes lighting {\n 0% {\n opacity: 0;\n }\n 10% {\n opacity: 0;\n }\n 11% {\n opacity: 1;\n }\n 14% {\n opacity: 0;\n }\n 20% {\n opacity: 0;\n }\n 21% {\n opacity: 1;\n }\n 24% {\n opacity: 0;\n }\n 104% {\n opacity: 0;\n }\n}\n"}

brave-dog-13

👁 实时预览

📝 源代码