{"html":"

\n\n

\n","css":".container {\n position: absolute;\n width: 380px;\n height: 380px;\n margin: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.car-container {\n position: absolute;\n width: 380px;\n height: 380px;\n}\n\n.car {\n position: absolute;\n width: 220px;\n height: 110px;\n background-color: #911717;\n left: 30px;\n top: 150px;\n clip-path: polygon(6% 0%, 80% 0%, 100% 50%, 100% 100%, 0% 100%);\n}\n\n.car::before {\n content: \"\";\n position: absolute;\n width: 220px;\n height: 45px;\n background-color: #ba1c1c;\n left: 0px;\n top: 5px;\n border-top: 4px solid #630909;\n border-bottom: 2px solid #630909;\n}\n\n.car::after {\n content: \"\";\n position: absolute;\n width: 2px;\n height: 110px;\n background-color: #630909;\n left: 140px;\n top: 5px;\n transform: rotate(3deg);\n box-shadow:\n -65px 5px #630909,\n 78px 5px #630909;\n}\n\n.front-part {\n position: absolute;\n width: 100px;\n height: 55px;\n background-color: #911717;\n right: 30px;\n top: 205px;\n clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 100%);\n}\n\n.front-part2 {\n position: absolute;\n width: 100px;\n height: 10px;\n background-color: rgb(154, 11, 11);\n right: 30px;\n transform: rotate(6.3deg);\n top: 212px;\n border-bottom: 2px solid #630909;\n}\n.front-part2::after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 8px;\n background-color: rgba(251, 243, 205, 0.686);\n right: 22px;\n top: -4px;\n box-shadow: inset 0px -3px #000000c9;\n}\n\n.front-part2::before {\n content: \"\";\n position: absolute;\n width: 95px;\n height: 5px;\n background-color: #d41111;\n top: -5px;\n border-radius: 50% 50% 0% 0%;\n}\n\n.front-part3 {\n position: absolute;\n background-color: #3d090965;\n width: 320px;\n height: 30px;\n bottom: 120px;\n left: 30px;\n box-shadow: inset 0px 12px rgba(252, 72, 72, 0.147);\n}\n\n.front-part3::before {\n content: \"\";\n position: absolute;\n background-color: #f984843b;\n width: 220px;\n height: 8px;\n bottom: 46px;\n left: 0px;\n}\n\n.bottom-part {\n position: absolute;\n width: 320px;\n height: 20px;\n background-color: #630909;\n left: 30px;\n top: 260px;\n}\n\n.bottom-part::before {\n content: \"\";\n position: absolute;\n width: 50px;\n height: 25px;\n background-color: #864343;\n left: -8px;\n top: -5px;\n border-radius: 5px 0px 0px 10px;\n box-shadow:\n inset -5px -8px rgba(0, 0, 0, 0.409),\n inset -5px 3px rgba(255, 255, 255, 0.324);\n}\n\n.wheel-container {\n position: absolute;\n width: 100px;\n height: 46px;\n background-color: black;\n left: 40px;\n top: 234px;\n clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);\n box-shadow: 100px 0px;\n}\n\n.wheel-container2 {\n left: 235px;\n}\n\n.wheel-back {\n position: absolute;\n background-color: rgb(33, 9, 9);\n width: 30px;\n height: 70px;\n left: 6px;\n top: 175px;\n border-radius: 8px;\n transform: rotate(4deg);\n box-shadow:\n inset 6px -1px 0px -2px rgb(101, 101, 101),\n inset 0px 5px rgb(96, 96, 96),\n inset 0px 30px 0px -4px #2b2b2b;\n}\n\n.wheel-break {\n width: 30px;\n height: 30px;\n position: absolute;\n border-radius: 50%;\n background-color: rgb(183, 189, 211);\n bottom: 25px;\n left: 25px;\n}\n\n.wheel-break::after {\n content: \"\";\n position: absolute;\n background-color: rgb(183, 0, 0);\n width: 8px;\n height: 15px;\n right: -1px;\n top: 8px;\n border-radius: 0% 100% 100% 0% / 0% 50% 50% 0%;\n}\n\n.wheel-break::before {\n content: \"\";\n position: absolute;\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: rgb(0, 0, 0);\n top: 3.5px;\n left: 3.5px;\n border: 4px solid rgb(90, 100, 134);\n}\n\n.wheel-break2 {\n width: 30px;\n height: 30px;\n position: absolute;\n border-radius: 50%;\n background-color: rgb(183, 189, 211);\n bottom: 25px;\n left: 25px;\n}\n\n.wheel-break2::after {\n content: \"\";\n position: absolute;\n background-color: rgb(183, 0, 0);\n width: 10px;\n height: 25px;\n left: -2px;\n top: 3px;\n border-radius: 100% 0% 0% 100% / 50% 0% 0% 50%;\n}\n\n.wheel-break2::before {\n content: \"\";\n position: absolute;\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: rgb(0, 0, 0);\n top: 3.5px;\n left: 3.5px;\n border: 4px solid rgb(90, 100, 134);\n}\n\n.window {\n width: 55px;\n height: 40px;\n position: absolute;\n background-color: black;\n top: 160px;\n left: 45px;\n transform: skew(-5deg);\n border-radius: 6px;\n box-shadow: inset 0px 0px 0px 2px rgb(61, 61, 61);\n}\n\n.window::before {\n content: \"\";\n width: 48px;\n height: 40px;\n position: absolute;\n background-color: black;\n top: 0px;\n left: 72px;\n border-radius: 6px;\n box-shadow: inset 0px 0px 0px 2px rgb(61, 61, 61);\n}\n\n.window::after {\n content: \"\";\n width: 30px;\n height: 40px;\n position: absolute;\n background-color: black;\n top: 0px;\n left: 132px;\n border-radius: 6px 6px 0px 6px;\n box-shadow:\n inset 2px 0px rgb(61, 61, 61),\n inset 0px 2px rgb(61, 61, 61);\n}\n\n.window2 {\n width: 53px;\n height: 20px;\n position: absolute;\n background-color: black;\n top: 180px;\n left: 180px;\n border-radius: 0% 100% 10% 0% / 0% 80% 10% 4%;\n box-shadow: inset 0px -2px rgb(61, 61, 61);\n}\n\n.window2::before {\n content: \"\";\n position: absolute;\n width: 15px;\n height: 42px;\n background-color: black;\n top: -18px;\n right: 11px;\n transform: rotate(-37deg);\n border-radius: 0% 10% 0% 100%;\n box-shadow: inset -2px 0px rgb(61, 61, 61);\n}\n\n.window2::after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 36px;\n background-color: rgb(60, 60, 61);\n top: -18px;\n right: 25px;\n transform: skew(37deg);\n box-shadow:\n -60px 0px rgb(60, 60, 61),\n -130px 0px rgb(60, 60, 61);\n}\n\n.window3 {\n width: 4px;\n height: 25px;\n position: absolute;\n background-color: #bbbcbc52;\n top: 173px;\n left: 189px;\n transform: skew(38deg);\n box-shadow:\n -60px 0px #bbbcbc52,\n -129px -1px #bbbcbc52;\n}\n\n.window3::before {\n content: \"\";\n width: 3px;\n height: 55px;\n position: absolute;\n background-color: black;\n top: -22px;\n left: 42px;\n}\n\n.details {\n position: absolute;\n width: 60px;\n height: 4px;\n background-color: black;\n top: 220px;\n left: 40px;\n box-shadow: 150px 0px;\n}\n\n.details::before {\n content: \"\";\n position: absolute;\n width: 50px;\n height: 4px;\n background-color: black;\n top: 0px;\n right: -70px;\n box-shadow:\n 15px 45px 0px 0px #6f6f6f,\n 70px 45px 0px 0px #6f6f6f,\n 50px 45px 0px 0px #6f6f6f,\n 20px 50px 0px 1px #3b3b3b,\n 66px 50px 0px 1px #3b3b3b,\n 20px 50px 0px 5px,\n 66px 50px 0px 5px;\n}\n\n.details::after {\n content: \"\";\n position: absolute;\n width: 70px;\n height: 4px;\n background-color: black;\n right: -230px;\n transform: rotate(5deg);\n bottom: -3px;\n}\n\n.details2 {\n position: absolute;\n width: 60px;\n height: 8px;\n background-color: #c42525;\n top: 228px;\n left: 60px;\n box-shadow: 195px 2px #c42525;\n border-radius: 17% 18% 26% 26% / 100% 100% 0% 0%;\n}\n\n.details2::before {\n content: \"\";\n position: absolute;\n width: 5px;\n height: 54px;\n background-color: #c42525;\n transform: rotate(24deg);\n left: -8.7px;\n box-shadow: 178.1px -79px #c42525;\n}\n\n.details2::after {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 54px;\n background-color: #9c1717;\n transform: rotate(-24deg);\n left: 65px;\n box-shadow: 178.1px 79px #9c1717;\n}\n\n.details4 {\n position: absolute;\n width: 50px;\n height: 3px;\n background-color: #f75f5f8c;\n top: 233px;\n left: 64px;\n box-shadow: 195px 2px #f75f5f8c;\n border-radius: 17% 18% 26% 26% / 100% 100% 0% 0%;\n}\n\n.details4::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 50px;\n background-color: #f75f5f8c;\n transform: rotate(24deg);\n left: -11px;\n top: -2px;\n box-shadow: 178.1px -77px 0px -0.5px #f75f5f8c;\n}\n\n.details4::after {\n content: \"\";\n position: absolute;\n width: 2px;\n height: 50px;\n background-color: #f75f5f8c;\n transform: rotate(-24deg);\n left: 60px;\n top: -2px;\n box-shadow: 177px 81px #f75f5f8c;\n}\n\n.details3 {\n position: absolute;\n width: 20px;\n height: 15px;\n background-color: black;\n bottom: 175px;\n right: 146px;\n box-shadow:\n inset 0px 2px #424141,\n inset -2px 0px #1d1515,\n inset 0px 10px rgb(37, 37, 37);\n border-radius: 4px 4px 0px 4px;\n}\n\n.details3::before {\n position: absolute;\n content: \"\";\n width: 10px;\n height: 4px;\n background-color: rgba(0, 0, 0, 0.858);\n left: -41px;\n top: 30px;\n box-shadow: -67px 0px;\n}\n\n.details3::after {\n position: absolute;\n content: \"\";\n width: 2px;\n height: 2px;\n background-color: rgba(179, 178, 178, 0.858);\n left: -41px;\n top: 30px;\n box-shadow: -67px 0px rgb(167, 167, 167);\n}\n\n.bumper {\n position: absolute;\n width: 20px;\n height: 35px;\n background-color: black;\n bottom: 100px;\n right: 23px;\n border-radius: 0% 20% 20% 0%;\n box-shadow: inset -4px 0px rgb(79, 79, 79);\n}\n\n.bumper::before {\n content: \"\";\n position: absolute;\n width: 20px;\n height: 3px;\n background-color: rgb(105, 105, 105);\n box-shadow: 0px 14px 0px -0.3px rgba(251, 251, 251, 0.315);\n}\n\n.bumper::after {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 25px;\n background-color: rgb(69, 69, 69);\n rotate: 8deg;\n top: 3px;\n left: -2px;\n}\n\n.bumper2 {\n position: absolute;\n width: 25px;\n height: 5px;\n background-color: rgb(39, 39, 39);\n bottom: 101px;\n right: 23px;\n rotate: 5deg;\n}\n\n.bumper2::before {\n content: \"\";\n position: absolute;\n}\n\n.details5 {\n position: absolute;\n width: 100px;\n height: 2px;\n background-color: rgb(187, 187, 187);\n bottom: 107px;\n left: 138px;\n}\n\n.details5::before {\n content: \"\";\n position: absolute;\n width: 20px;\n height: 10px;\n background-color: rgba(255, 255, 255, 0.096);\n top: -80px;\n left: -125px;\n transform: rotate(5deg);\n box-shadow:\n inset 0px -3px rgba(255, 255, 255, 0.24),\n 0px 40px 0px 1px black;\n}\n\n.details5::after {\n content: \"\";\n position: absolute;\n width: 170px;\n height: 1px;\n background-color: rgb(0, 0, 0);\n top: -120px;\n left: -98px;\n box-shadow: 0px -2px 0px 1px;\n}\n\n.wheel-logo {\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0 1px 4px 1px;\n border-color: transparent transparent white transparent;\n z-index: 1;\n transform: scale(1);\n}\n\n.wheel-logo::before {\n content: \"\";\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0 1px 4px 1px;\n border-color: transparent transparent white transparent;\n transform: rotate(-65deg);\n right: 1px;\n}\n\n.wheel-logo::after {\n content: \"\";\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0 1px 4px 1px;\n border-color: transparent transparent white transparent;\n transform: rotate(65deg);\n left: 1px;\n}\n\n.head-lights {\n position: absolute;\n width: 16px;\n height: 20px;\n background-color: rgb(212, 207, 166);\n left: 334px;\n bottom: 140px;\n box-shadow:\n inset 3px 0px #840f0f,\n inset -5px 0px #9a4e4e,\n inset -5px 0px #ad2121;\n}\n\n.head-lights::before {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 15px;\n background-color: #840f0f;\n left: 11px;\n bottom: 0px;\n}\n\n.head-lights::after {\n content: \"\";\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: #840f0f86;\n left: 3px;\n bottom: 0px;\n box-shadow: -1px -13px 0px -1px rgba(254, 254, 235, 0.568);\n}\n\n.tail-lights {\n position: absolute;\n width: 4px;\n height: 10px;\n background-color: rgb(252, 3, 3);\n right: 348px;\n bottom: 125px;\n box-shadow: inset -2px 0px rgb(214, 0, 0);\n}\n\n.tail-lights::before {\n content: \"\";\n position: absolute;\n width: 14px;\n height: 16px;\n background-color: rgba(255, 0, 0, 0.288);\n left: -4px;\n}\n\n.extra-lighting-details {\n position: absolute;\n background-color: rgba(255, 255, 255, 0.712);\n height: 1.5px;\n width: 50px;\n bottom: 145px;\n left: 65px;\n box-shadow: 195px 2px rgba(255, 255, 255, 0.712);\n}\n\n.extra-lighting-details::before {\n content: \"\";\n position: absolute;\n background-color: rgba(255, 255, 255, 0.288);\n height: 2px;\n width: 115px;\n top: 10px;\n left: 65px;\n box-shadow: -30px -35px 0px 1px rgba(255, 255, 255, 0.205);\n}\n\n.extra-lighting-details::after {\n content: \"\";\n position: absolute;\n background-color: rgba(255, 255, 255, 0.568);\n height: 2px;\n width: 80px;\n top: -22px;\n left: 190px;\n rotate: 8deg;\n box-shadow: 0px -3px rgba(0, 0, 0, 0.349);\n}\n\n.extra-lighting-details2 {\n position: absolute;\n background-color: rgba(0, 0, 0, 0.226);\n height: 12px;\n width: 10px;\n bottom: 165px;\n left: 220px;\n rotate: 15deg;\n}\n\n.extra-lighting-details2::before {\n content: \"\";\n position: absolute;\n background-color: rgba(0, 0, 0, 0.308);\n height: 8px;\n width: 10px;\n bottom: 5px;\n left: 0px;\n rotate: -15deg;\n}\n\n.extra-lighting-details3 {\n position: absolute;\n background-color: rgba(255, 255, 255, 0.089);\n height: 45px;\n width: 5px;\n bottom: 175px;\n left: 100px;\n rotate: 5deg;\n box-shadow:\n 10px 0px rgba(255, 255, 255, 0.144),\n 65px -5px rgba(255, 255, 255, 0.144);\n}\n\n.extra-lighting-details3::before {\n content: \"\";\n position: absolute;\n background-color: rgba(255, 255, 255, 0.418);\n height: 1px;\n width: 25px;\n bottom: -33px;\n left: 240px;\n rotate: -5deg;\n box-shadow: 1px -12px rgba(255, 255, 255, 0.541);\n}\n\n.street {\n position: absolute;\n width: 600px;\n height: 450px;\n bottom: 0px;\n z-index: -1;\n overflow: hidden;\n}\n\n.line {\n position: absolute;\n width: 100%;\n height: 4px;\n background-color: black;\n bottom: 62px;\n}\n\n.obstacles {\n position: absolute;\n width: 20px;\n height: 15px;\n background-color: black;\n border-radius: 40% 40% 0% 0%;\n bottom: 60px;\n left: 110%;\n}\n\n/*wheel*/\n.wheel-ring {\n position: absolute;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n left: 10px;\n top: 10px;\n border: 6px solid rgb(34, 34, 34);\n box-shadow:\n 0px 0px 0px 4px rgb(63, 63, 63),\n inset 0px 0px 0px 2px rgb(0, 0, 0);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.wheel-ring2 {\n left: 10px;\n top: 10px;\n}\n\n.container-wheel2 {\n width: 80px;\n height: 80px;\n position: absolute;\n bottom: 60px;\n left: 245px;\n}\n\n.container-wheel1 {\n width: 80px;\n height: 80px;\n position: absolute;\n bottom: 60px;\n left: 50px;\n}\n\n.wheel-center {\n position: absolute;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: rgb(255, 255, 255);\n box-shadow:\n inset 0px 0px 0px 5px,\n inset 0px 0px 0px 6px rgb(191, 191, 191),\n inset 0px 0px 0px 12px black;\n}\n\n.wheel-center2 {\n position: absolute;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n z-index: 1;\n border: 1px solid white;\n}\n\n.wheel-ring-stick {\n position: absolute;\n width: 4px;\n height: 18px;\n background-color: black;\n top: 32px;\n left: 19px;\n transform: rotate(15deg);\n}\n\n.wheel-ring-stick::before {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 18px;\n background-color: black;\n top: -2px;\n left: 8px;\n transform: rotate(-20deg);\n}\n\n.wheel-ring-stick2 {\n transform: rotate(82deg);\n left: 8px;\n top: 16px;\n}\n\n.wheel-ring-stick3 {\n left: 34px;\n top: 25px;\n transform: rotate(-55deg);\n}\n\n.wheel-ring-stick4 {\n top: 2px;\n left: 17px;\n transform: rotate(155deg);\n}\n\n.wheel-ring-stick5 {\n top: 7px;\n left: 36px;\n transform: rotate(225deg);\n}\n\n/*end of wheel*/\n\n/*----AMIMATION-----*/\n\n/*wheel*/\n@keyframes spinning {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.wheel-ring1 {\n animation: spinning 1s linear infinite;\n}\n\n.wheel-ring2 {\n animation: spinning 1s linear infinite;\n}\n\n.container-wheel1 {\n animation: bounce1 3s infinite;\n}\n\n.container-wheel2 {\n animation: bounce2 3s infinite;\n}\n\n@keyframes bounce1 {\n 0%,\n 50% {\n transform: translateY(0px);\n }\n 52% {\n transform: translateY(-5px);\n }\n 65% {\n transform: translateY(0px);\n }\n}\n\n@keyframes bounce2 {\n 0%,\n 28% {\n transform: translateY(0px);\n }\n 30% {\n transform: translateY(-5px);\n }\n 45% {\n transform: translateY(0px);\n }\n}\n/*wheel-end*/\n\n/*car-body*/\n.car-container {\n animation: lift 3s infinite cubic-bezier(0.96, 0.5, 0.27, 0.55);\n transform-origin: center;\n}\n\n@keyframes lift {\n 0%,\n 30% {\n transform: rotate(0deg) translateY(0px);\n }\n 32% {\n transform: rotate(-1.5deg) translateY(-2px);\n }\n 48%,\n 50% {\n transform: rotate(0deg) translateY(0px);\n }\n 56.5% {\n transform: rotate(1deg) translateY(-1px);\n }\n 68% {\n transform: rotate(0deg) translateY(0px);\n }\n}\n\n/*obstacle*/\n\n.obstacles {\n animation: displacement 3s linear infinite;\n}\n\n@keyframes displacement {\n 0% {\n left: 110%;\n }\n 100% {\n left: -40%;\n }\n}\n"}

wonderful-squid-39

👁 实时预览

📝 源代码