{"html":"

\n","css":".car-container {\n position: absolute;\n width: 400px;\n height: 400px;\n margin: auto;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n}\n\n.car {\n position: absolute;\n background-color: rgb(204, 204, 204);\n width: 200px;\n height: 120px;\n left: 50px;\n border-top: 4px solid rgb(162, 162, 162);\n top: 135px;\n animation: bounce 0.4s infinite;\n}\n\n@keyframes bounce {\n 0% {\n top: 135px;\n }\n 50% {\n top: 132px;\n }\n}\n\n.car::before {\n content: \"\";\n position: absolute;\n width: 290px;\n height: 20px;\n background-color: rgb(46, 46, 81);\n bottom: -10px;\n}\n\n.car::after {\n content: \"\";\n position: absolute;\n background-color: rgb(229, 229, 229);\n width: 80px;\n height: 90px;\n right: -90px;\n bottom: 10px;\n clip-path: polygon(0% 0%, 50% 0, 100% 60%, 100% 100%, 0% 100%);\n}\n\n.window {\n position: absolute;\n background-color: rgb(126, 191, 226);\n width: 50px;\n height: 40px;\n right: -75px;\n top: 26px;\n z-index: 1;\n clip-path: polygon(0% 0%, 40% 0, 100% 100%, 0% 100%);\n border: 2px solid rgb(135, 135, 135);\n}\n\n.window::before {\n content: \"\";\n position: absolute;\n background-color: rgb(186, 225, 247);\n width: 5px;\n height: 40px;\n left: 5px;\n transform: skew(-36deg);\n box-shadow: 9px 0px rgb(186, 225, 247);\n}\n.window::after {\n content: \"\";\n position: absolute;\n background-color: rgb(108, 107, 107);\n width: 10px;\n height: 10px;\n bottom: 2px;\n right: 10px;\n box-shadow:\n 2px 6px 0px -2px rgb(229, 229, 229),\n inset 2px 0px rgb(203, 203, 204);\n}\n\n.wheels {\n position: absolute;\n width: 45px;\n height: 45px;\n border-radius: 50%;\n background-color: #bcbcbc;\n border: 10px solid rgb(4, 4, 4);\n bottom: 108px;\n left: 90px;\n box-shadow: 0px 0px 0px 4px;\n animation: rotation 0.3s linear infinite;\n}\n\n@keyframes rotation {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.wheels::before {\n content: \"\";\n position: absolute;\n width: 5px;\n height: 5px;\n background-color: rgb(67, 67, 67);\n top: 10px;\n left: 3px;\n border-radius: 50%;\n box-shadow:\n 14.5px 0px rgb(67, 67, 67),\n 7px -7px rgb(67, 67, 67),\n 7px 7px rgb(67, 67, 67),\n 7px 0px 0px 4px rgb(67, 67, 67);\n animation: name duration timing-function delay iteration-count direction\n fill-mode;\n}\n\n.wheels2 {\n left: 270px;\n}\n\n.cargo-details {\n position: absolute;\n width: 185px;\n height: 20px;\n background-color: #e9e9e9;\n left: 8px;\n top: 5px;\n box-shadow:\n 0px 23px #e9e9e9,\n 0px 46px #e9e9e9,\n 0px 69px #e9e9e9;\n}\n\n.cargo-details::before {\n position: absolute;\n content: \"\";\n width: 10px;\n height: 4px;\n background-color: red;\n bottom: -72px;\n box-shadow:\n 10px 0px white,\n 20px 0px red,\n 30px 0px white,\n 40px 0px red,\n 50px 0px white,\n 60px 0px red,\n 70px 0px white,\n 80px 0px red,\n 90px 0px white,\n 100px 0px red,\n 110px 0px white,\n 120px 0px red,\n 130px 0px white,\n 140px 0px red,\n 150px 0px white,\n 160px 0px red,\n 170px 0px white,\n 175px 0px red;\n}\n\n.cargo-details::after {\n position: absolute;\n content: \"\";\n width: 10px;\n height: 6px;\n background-color: rgb(135, 135, 135);\n top: -6px;\n left: -10px;\n box-shadow:\n 195px 0px rgb(135, 135, 135),\n 0px 125px rgb(46, 46, 81);\n}\n\n.door {\n position: absolute;\n width: 10px;\n height: 4px;\n background-color: black;\n right: -31px;\n bottom: 40px;\n z-index: 2;\n}\n\n.door::before {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 20px;\n background-color: rgb(85, 84, 85);\n left: -21px;\n z-index: -1;\n bottom: -30px;\n box-shadow: inset 0px 4px rgb(163, 163, 163);\n}\n\n.lights {\n position: absolute;\n width: 12px;\n height: 20px;\n background-color: rgb(255, 237, 191);\n right: -90px;\n bottom: 0px;\n z-index: 1;\n box-shadow: inset 0px -8px rgba(172, 2, 2, 0.719);\n animation: lighting1 1.5s infinite ease-in-out;\n}\n\n@keyframes lighting1 {\n 0% {\n background-color: rgb(255, 237, 191);\n box-shadow: inset 0px -8px rgba(172, 2, 2, 0.719);\n }\n\n 50% {\n box-shadow: inset 0px -8px rgba(217, 83, 1, 0.719);\n }\n}\n\n.lights::before {\n content: \"\";\n position: absolute;\n width: 6px;\n height: 15px;\n background-color: rgb(207, 2, 2);\n left: -280px;\n bottom: 0px;\n box-shadow: inset 0px 7px rgb(207, 2, 2);\n animation: lighting 1.5s infinite ease-in-out;\n}\n\n@keyframes lighting {\n 0% {\n box-shadow: inset 0px 9px rgb(207, 2, 2);\n }\n\n 50% {\n box-shadow: inset 0px 9px rgb(255, 0, 0);\n }\n}\n\n.lights::after {\n content: \"\";\n position: absolute;\n width: 8px;\n height: 2px;\n background-color: rgb(81, 81, 81);\n top: -8px;\n box-shadow:\n 0px -6px rgb(81, 81, 81),\n 0px -12px rgb(81, 81, 81);\n right: 0px;\n}\n\n.street {\n height: 2px;\n width: 70px;\n background-color: black;\n position: absolute;\n bottom: 105px;\n left: 0;\n box-shadow:\n 90px 0,\n 180px 0,\n 270px 0,\n 360px 0;\n animation: motion 2s linear infinite;\n}\n\n.street::before {\n content: \"\";\n height: 2px;\n width: 70px;\n background-color: black;\n position: absolute;\n bottom: 0;\n left: 450px;\n box-shadow:\n 90px 0,\n 180px 0,\n 270px 0,\n 360px 0;\n}\n\n.street2 {\n position: absolute;\n height: 20px;\n width: 100%;\n background-color: #bcbcbc;\n}\n\n@keyframes motion {\n 0% {\n left: 0;\n }\n 100% {\n left: -450px;\n }\n}\n\n.post {\n position: absolute;\n width: 5px;\n height: 180px;\n background-color: black;\n right: -15px;\n top: 115px;\n animation: moving 2.9s infinite linear;\n z-index: -2;\n}\n\n@keyframes moving {\n 0% {\n transform: translateX(0px);\n }\n 100% {\n transform: translateX(-650px);\n }\n}\n\n.post::before {\n width: 20px;\n height: 20px;\n position: absolute;\n content: \"\";\n background-color: black;\n top: -15px;\n left: -7px;\n clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%);\n}\n\n.post::after {\n content: \"\";\n position: absolute;\n width: 0;\n height: 0;\n border-bottom: 20px solid transparent;\n border-left: 10px solid transparent;\n border-left: 20px solid black;\n transform: rotate(45deg);\n top: -23px;\n left: -7px;\n}\n"}

short-owl-85

👁 实时预览

📝 源代码