{"html":"

\n \n \n \n

\n \n \n\n image/svg+xml\n \n \n \n \n \n \n \n

DELOREAN

\n","css":"#synthwave {\n position: relative;\n width: 300px;\n height: 250px;\n background-color: #2e0d3f;\n scale: 0.9;\n}\n\n#sunReflection {\n background-color: yellow;\n height: 5px;\n position: absolute;\n width: 66px;\n left: 50%;\n transform: translate(-50%);\n clip-path: polygon(0% 100%, 100% 100%, 98% 0%, 2% 0%);\n top: -3px;\n filter: blur(3px);\n border-radius: 50%;\n}\n\n#window {\n background-color: black;\n height: 20px;\n position: absolute;\n width: 82px;\n left: 50%;\n transform: translate(-50%);\n clip-path: polygon(0% 100%, 100% 100%, 93% 0%, 7% 0%);\n top: -5px;\n}\n\n#logo {\n position: absolute;\n left: 50%;\n transform: translate(-50%);\n background-color: rgb(18, 18, 18);\n width: 25px;\n height: 8px;\n border-radius: 2px;\n bottom: 8px;\n}\n\n#lightsSection {\n z-index: 2;\n}\n\n#lightStripe2,\n#lightStripe3 {\n background-color: red;\n width: 5px;\n right: 49px;\n height: 70px;\n position: absolute;\n filter: blur(6px);\n border-radius: 50%;\n top: -5px;\n animation: blinkingLights infinite 2s;\n}\n\n#lightStripe0,\n#lightStripe1 {\n background-color: red;\n width: 5px;\n left: 49px;\n height: 70px;\n position: absolute;\n filter: blur(6px);\n border-radius: 50%;\n top: -5px;\n animation: blinkingLights infinite 2s 1s;\n}\n\n#lightStripe0,\n#lightStripe2 {\n transform: rotate(30deg);\n}\n\n#lightStripe1,\n#lightStripe3 {\n transform: rotate(-30deg);\n}\n\n@keyframes blinkingLights {\n 0%,\n 49% {\n opacity: 1;\n }\n 50%,\n 100% {\n opacity: 0;\n }\n}\n\n#lights2 {\n border: black solid 2px;\n bottom: 5px;\n position: absolute;\n background-color: black;\n left: 50%;\n transform: translate(-50%);\n height: 15px;\n width: 112px;\n clip-path: polygon(0% 100%, 100% 100%, 93% 0%, 7% 0%);\n display: grid;\n grid-template-columns: 35px 1fr 35px;\n grid-template-rows: 1fr;\n grid-column-gap: 0px;\n grid-row-gap: 0px;\n}\n\n#cageLine0 {\n background-color: black;\n width: 100%;\n height: 1px;\n top: 3px;\n position: absolute;\n}\n\n#cageLine1 {\n background-color: black;\n width: 100%;\n height: 1px;\n bottom: 3px;\n position: absolute;\n}\n\n#tailLight1d {\n background-color: rgb(116, 0, 0);\n height: 100%;\n width: 5px;\n position: absolute;\n left: 10px;\n}\n\n#tailLight0d {\n background-color: rgb(116, 0, 0);\n height: 100%;\n width: 5px;\n position: absolute;\n right: 10px;\n}\n\n#tailLight0c {\n clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 5% 0%);\n background-color: rgb(50, 0, 0);\n height: 100%;\n width: 19px;\n position: absolute;\n right: 4px;\n}\n\n#tailLight1c {\n clip-path: polygon(0% 100%, 100% 100%, 95% 0%, 0% 0%);\n background-color: rgb(50, 0, 0);\n height: 100%;\n width: 19px;\n position: absolute;\n left: 4px;\n}\n\n#tailLight0b {\n clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 5% 0%);\n background-color: gray;\n height: 100%;\n width: 23px;\n position: absolute;\n right: 0;\n}\n\n#tailLight1b {\n clip-path: polygon(0% 100%, 100% 100%, 95% 0%, 0% 0%);\n background-color: gray;\n height: 100%;\n width: 23px;\n position: absolute;\n left: 0;\n}\n\n#tailLight0a {\n clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 5% 0%);\n background-color: rgba(75, 75, 0, 0.658);\n height: 100%;\n width: 29px;\n position: absolute;\n right: 0;\n}\n\n#tailLight1a {\n clip-path: polygon(0% 100%, 100% 100%, 95% 0%, 0% 0%);\n background-color: rgba(75, 75, 0, 0.658);\n height: 100%;\n width: 29px;\n position: absolute;\n left: 0;\n}\n\n#tailLight0,\n#tailLight1 {\n background-color: rgba(255, 255, 0, 0.46);\n position: relative;\n}\n\n#tailLight0 {\n clip-path: polygon(2% 100%, 100% 100%, 100% 0%, 20% 0%);\n}\n\n#tailLight1 {\n clip-path: polygon(0% 100%, 98% 100%, 80% 0%, 0% 0%);\n}\n\n#lights1 {\n position: absolute;\n width: 75%;\n height: 100%;\n background-color: gray;\n left: 50%;\n transform: translate(-50%);\n bottom: 4px;\n clip-path: polygon(0% 100%, 100% 100%, 80% 0%, 20% 0%);\n}\n\n#lights0 {\n position: absolute;\n width: 123px;\n height: 5px;\n background-color: rgb(115, 115, 115);\n left: 50%;\n transform: translate(-50%);\n bottom: -1px;\n}\n\n#exhaust1 {\n position: absolute;\n right: 25%;\n width: 10px;\n height: 10px;\n background-color: black;\n border-radius: 50%;\n bottom: 10px;\n}\n\n#exhaust1::before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 70%;\n transform: translate(-50%, -50%);\n width: 7px;\n height: 9px;\n background-color: gray;\n border-radius: 30%;\n bottom: 8px;\n}\n\n#exhaust0 {\n position: absolute;\n left: 25%;\n width: 10px;\n height: 10px;\n background-color: black;\n border-radius: 50%;\n bottom: 10px;\n}\n\n#exhaust0::before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 70%;\n transform: translate(-50%, -50%);\n width: 7px;\n height: 9px;\n background-color: gray;\n border-radius: 30%;\n bottom: 8px;\n}\n\n#bumper3 {\n position: absolute;\n left: 50%;\n bottom: 23px;\n transform: translate(-50%);\n width: 100px;\n height: 2px;\n display: grid;\n grid-template-columns: repeat(8, 1fr);\n grid-template-rows: 1fr;\n grid-column-gap: 5px;\n}\n\n#bumper3 div {\n background-color: black;\n border-radius: 10px;\n}\n\n#bumper2 {\n background-color: black;\n position: absolute;\n left: 50%;\n bottom: 12px;\n transform: translate(-50%);\n width: 110px;\n height: 6px;\n color: rgba(255, 255, 255, 0.7);\n font-family: Verdana, Geneva, Tahoma, sans-serif;\n font-weight: bold;\n font-size: 8px;\n letter-spacing: 2px;\n padding-left: 10px;\n}\n\n#bumper1 {\n background-color: black;\n position: absolute;\n left: 50%;\n top: 1px;\n transform: translate(-50%);\n width: 121px;\n height: 30%;\n color: rgba(255, 255, 255, 0.7);\n font-family: Verdana, Geneva, Tahoma, sans-serif;\n font-weight: bold;\n font-size: 8px;\n letter-spacing: 2px;\n padding-left: 10px;\n clip-path: polygon(2% 100%, 98% 100%, 100% 0%, 0% 0%);\n}\n\n#bumper0 {\n clip-path: polygon(5% 100%, 95% 100%, 100% 0%, 0% 0%);\n background-color: gray;\n position: absolute;\n left: 50%;\n top: 0px;\n transform: translate(-50%);\n width: 74%;\n height: 25px;\n}\n\n#bumperSection,\n#lightsSection,\n#windowsSection {\n position: relative;\n perspective: 800px;\n}\n\n#car {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: repeat(3, 1fr);\n grid-column-gap: 0px;\n grid-row-gap: 0px;\n position: absolute;\n height: 50%;\n width: 55%;\n left: 50%;\n bottom: 0;\n transform: translate(-50%);\n animation: movingCar infinite 4s;\n}\n\n@keyframes movingCar {\n 0% {\n bottom: 0;\n scale: 1;\n left: 50%;\n }\n 19% {\n bottom: 40px;\n scale: 0;\n left: 23%;\n }\n 20% {\n bottom: -600px;\n scale: 2;\n left: 80%;\n }\n 30% {\n bottom: 0;\n scale: 1;\n left: 50%;\n }\n}\n\n#cutout {\n background-color: transparent;\n width: 100%;\n height: 100%;\n position: absolute;\n overflow: hidden;\n}\n\n#cutout::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 260px;\n height: 225px;\n background-color: transparent;\n border-radius: 20px;\n box-shadow: 0 0 0 1000px rgb(19, 19, 19);\n}\n\n#hill {\n width: 100px;\n height: 100px;\n position: absolute;\n top: 50px;\n right: 30px;\n scale: 0.2;\n}\n\n#hill2 {\n width: 100px;\n height: 100px;\n position: absolute;\n top: 50px;\n left: 30px;\n scale: 0.2;\n transform: scaleX(-1);\n}\n\n#tree {\n position: absolute;\n width: 120px;\n height: 120px;\n left: 55%;\n transform: translateX(-100%);\n bottom: 65px;\n animation: movingTree infinite 4s;\n transform-origin: 50% 70%;\n}\n\n#tree2 {\n position: absolute;\n width: 120px;\n height: 120px;\n right: 55%;\n transform: translateX(100%) scaleX(-1) rotate(8deg);\n animation: movingTree2 infinite 4s 0.5s;\n bottom: 65px;\n transform-origin: 50% 70%;\n}\n\n@keyframes movingTree {\n 0% {\n transform: translateX(-100%) rotate(8deg);\n }\n 50% {\n transform: translateX(-100%) rotate(-8deg);\n }\n 100% {\n transform: translateX(-100%) rotate(8deg);\n }\n}\n\n@keyframes movingTree2 {\n 0% {\n transform: translateX(100%) scaleX(-1) rotate(8deg);\n }\n 50% {\n transform: translateX(100%) scaleX(-1) rotate(-8deg);\n }\n 100% {\n transform: translateX(100%) scaleX(-1) rotate(8deg);\n }\n}\n\n#line1,\n#line2,\n#line3,\n#line4,\n#line5,\n#line6,\n#line7 {\n border-radius: 20px;\n background-color: #fcff1a;\n animation: movingLines infinite 0.5s linear;\n}\n\n@keyframes movingLines {\n 0% {\n transform: translateX(0px);\n }\n 100% {\n transform: translateY(130px);\n }\n}\n\n#line0 {\n border-radius: 20px;\n background-color: #fcff1a;\n animation: movingLines0 infinite 0.5s linear;\n}\n\n@keyframes movingLines0 {\n 0% {\n transform: translateX(0px);\n height: 0%;\n }\n 100% {\n transform: translateY(130px);\n height: 100%;\n }\n}\n\n#roadLines {\n perspective: 800px;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n bottom: -425px;\n width: 6px;\n height: 1000px;\n}\n\n#lines {\n transform: rotateX(85deg);\n transform-origin: center;\n box-shadow: 0 10px 20px rgba(252, 255, 26, 0.2);\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: repeat(8, 1fr);\n grid-column-gap: 0px;\n grid-row-gap: 30px;\n width: 100%;\n height: 100%;\n}\n\n#sun {\n overflow: hidden;\n width: 120px;\n height: 120px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -70%);\n}\n\n#ball {\n width: 120px;\n height: 120px;\n border-radius: 50%;\n background-color: #fbe54f;\n}\n\n#stripe0 {\n position: absolute;\n width: 100%;\n height: 0px;\n background-color: #2e0d3f;\n top: 10px;\n left: 50%;\n transform: translate(-50%);\n animation: stripe0mov infinite 1s linear;\n}\n\n@keyframes stripe0mov {\n 0% {\n top: 10px;\n height: 0px;\n }\n 99% {\n top: 20px;\n height: 3px;\n }\n 100% {\n height: 0px;\n top: 10px;\n }\n}\n\n#stripe1 {\n position: absolute;\n width: 100%;\n height: 3px;\n background-color: #2e0d3f;\n top: 20px;\n left: 50%;\n transform: translate(-50%);\n animation: stripe1mov infinite 1s linear;\n}\n\n@keyframes stripe1mov {\n 0% {\n top: 20px;\n height: 3px;\n }\n 99% {\n top: 31px;\n height: 4px;\n }\n 100% {\n top: 20px;\n height: 3px;\n }\n}\n\n#stripe2 {\n position: absolute;\n width: 100%;\n height: 4px;\n background-color: #2e0d3f;\n top: 31px;\n left: 50%;\n transform: translate(-50%);\n animation: stripe2mov infinite 1s linear;\n}\n\n@keyframes stripe2mov {\n 0% {\n top: 31px;\n height: 4px;\n }\n 99% {\n top: 44px;\n height: 4px;\n }\n 100% {\n top: 31px;\n height: 4px;\n }\n}\n\n#stripe3 {\n position: absolute;\n width: 100%;\n height: 4px;\n background-color: #2e0d3f;\n top: 44px;\n left: 50%;\n transform: translate(-50%);\n animation: stripe3mov infinite 1s linear;\n}\n\n@keyframes stripe3mov {\n 0% {\n top: 44px;\n height: 4px;\n }\n 99% {\n top: 58px;\n height: 5px;\n }\n 100% {\n top: 44px;\n height: 4px;\n }\n}\n\n#stripe4 {\n position: absolute;\n width: 100%;\n height: 5px;\n background-color: #2e0d3f;\n top: 58px;\n left: 50%;\n transform: translate(-50%);\n animation: stripe4mov infinite 1s linear;\n}\n\n@keyframes stripe4mov {\n 0% {\n top: 58px;\n height: 5px;\n }\n 99% {\n top: 75px;\n height: 8px;\n }\n 100% {\n top: 58px;\n height: 5px;\n }\n}\n\n#stripe5 {\n position: absolute;\n width: 100%;\n height: 8px;\n background-color: #2e0d3f;\n top: 75px;\n left: 50%;\n transform: translate(-50%);\n animation: stripe5mov infinite 1s linear;\n}\n\n@keyframes stripe5mov {\n 0% {\n top: 75px;\n height: 8px;\n }\n 99% {\n top: 97px;\n height: 9px;\n }\n 100% {\n top: 75px;\n height: 8px;\n }\n}\n\n#stripe6 {\n position: absolute;\n width: 100%;\n height: 9px;\n background-color: #2e0d3f;\n top: 97px;\n left: 50%;\n transform: translate(-50%);\n animation: stripe6mov infinite 1s linear;\n}\n\n@keyframes stripe6mov {\n 0% {\n top: 97px;\n height: 9px;\n }\n 99% {\n top: 120px;\n height: 9px;\n }\n 100% {\n top: 97px;\n height: 9px;\n }\n}\n\n#fog {\n position: absolute;\n top: 50px;\n width: 100%;\n height: 80%;\n background-image: linear-gradient(transparent, #b811c6);\n}\n\n#fog2 {\n position: absolute;\n top: 149px;\n width: 300px;\n height: 500px;\n background-image: linear-gradient(transparent, #b711c63f);\n transform: rotate(180deg);\n}\n\n#stars {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n#stars div {\n background-color: white;\n border-radius: 50%;\n position: absolute;\n}\n\n#star0 {\n width: 2px;\n height: 2px;\n left: 20px;\n top: 10px;\n}\n\n#star1 {\n width: 2px;\n height: 2px;\n left: 80px;\n top: 70px;\n}\n\n#star2 {\n width: 2px;\n height: 2px;\n left: 35px;\n top: 90px;\n}\n\n#star3 {\n width: 2px;\n height: 2px;\n left: 140px;\n top: 30px;\n}\n\n#star4 {\n width: 2px;\n height: 2px;\n left: 40px;\n top: 50px;\n}\n\n#star5 {\n width: 3px;\n height: 3px;\n left: 90px;\n top: 20px;\n}\n\n#star6 {\n width: 3px;\n height: 3px;\n left: 70px;\n top: 120px;\n}\n\n#star7 {\n width: 2px;\n height: 2px;\n right: 70px;\n top: 90px;\n}\n\n#star8 {\n width: 3px;\n height: 3px;\n right: 10px;\n top: 50px;\n}\n\n#star9 {\n width: 3px;\n height: 3px;\n right: 90px;\n top: 40px;\n}\n\n#star10 {\n width: 3px;\n height: 3px;\n right: 45px;\n top: 20px;\n}\n\n#star11 {\n width: 3px;\n height: 3px;\n right: 60px;\n top: 120px;\n}\n\n#star12 {\n width: 3px;\n height: 3px;\n right: 50px;\n top: 60px;\n}\n\n#star13 {\n width: 3px;\n height: 3px;\n right: 120px;\n top: 10px;\n}\n\n#land {\n width: 100%;\n height: 40%;\n bottom: 0;\n position: absolute;\n background-color: #120b12;\n}\n\n#roadSide0 {\n position: absolute;\n width: 170px;\n height: 830px;\n perspective: 800px;\n bottom: -338px;\n left: -70px;\n}\n\n#roadSideGrid0 {\n border: solid #2afce0 3px;\n width: 100%;\n height: 100%;\n background-color: black;\n background:\n linear-gradient(to right, #2afce0 1px, transparent 1px) 0 0 / 20px 20px,\n linear-gradient(to bottom, #2afce0 1px, #120b12 1px) 0 0 / 20px 20px;\n transform: rotateX(85deg) rotateZ(10deg);\n transform-origin: center;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);\n animation: movingGrid0 infinite 0.2s linear;\n}\n\n@keyframes movingGrid0 {\n 0% {\n transform: rotateX(85deg) rotateZ(10deg) translateY(0px);\n }\n 99% {\n transform: rotateX(85deg) rotateZ(10deg) translateY(20px);\n }\n 100% {\n transform: rotateX(85deg) rotateZ(10deg) translateY(0px);\n }\n}\n\n#roadSide1 {\n position: absolute;\n width: 170px;\n height: 830px;\n perspective: 800px;\n bottom: -338px;\n right: -70px;\n}\n\n#roadSideGrid1 {\n border: solid #2afce0 2px;\n width: 100%;\n height: 100%;\n background-color: black;\n background:\n linear-gradient(to right, #2afce0 1px, transparent 1px) 0 0 / 20px 20px,\n linear-gradient(to bottom, #2afce0 1px, #120b12 1px) 0 0 / 20px 20px;\n transform: rotateX(85deg) rotateZ(-10deg);\n transform-origin: center;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);\n animation: movingGrid1 infinite 0.2s linear;\n}\n\n@keyframes movingGrid1 {\n 0% {\n transform: rotateX(85deg) rotateZ(-10deg) translateY(0px);\n }\n 99% {\n transform: rotateX(85deg) rotateZ(-10deg) translateY(20px);\n }\n 100% {\n transform: rotateX(85deg) rotateZ(-10deg) translateY(0px);\n }\n}\n"}

yellow-lion-16

👁 实时预览

📝 源代码