{"html":"

\n","css":".truck {\n --width: 220;\n}\n\n.truck * {\n transition: all 0.25s ease;\n}\n\n.truck {\n position: relative;\n width: calc(var(--width) * 1px);\n height: calc(var(--width) * 0.33px);\n}\n\n.truck:after {\n content: \"\";\n height: 5%;\n width: 100%;\n background: #000;\n position: absolute;\n left: 0;\n bottom: 5%;\n border-radius: 100%;\n filter: blur(10px);\n}\n\n.truck__indicator {\n height: 2%;\n width: 3%;\n position: absolute;\n right: 1.5%;\n background: #915d08;\n top: 64%;\n opacity: 0.45;\n z-index: 10;\n}\n\n.truck__foglight {\n height: 2%;\n width: 1%;\n position: absolute;\n left: 2%;\n background: #911308;\n top: 58%;\n opacity: 0.45;\n z-index: 10;\n}\n\n.truck__taillight {\n height: 2%;\n width: 1%;\n background: radial-gradient(circle at center, #ffebeb, #f00), #f00;\n box-shadow: 0 0 30px 5px #f33;\n position: absolute;\n top: 25%;\n z-index: 10;\n left: 0;\n}\n\n.truck__taillight:after {\n content: \"\";\n height: 100%;\n width: 800%;\n background: #ff4d4d;\n position: absolute;\n right: 0;\n top: 0;\n border-radius: 25%;\n filter: blur(8px);\n box-shadow: 0 0 60px 5px #ff8080;\n}\n\n.truck__headlight {\n height: 5%;\n width: 4%;\n position: absolute;\n right: 0;\n border-radius: 25%;\n top: 42%;\n z-index: 10;\n transform: rotate(4deg);\n background: #fff;\n box-shadow: 0 0 40px 5px #9bf, 0 0 2px 2px #b3ccff inset;\n}\n\n.truck__wheel {\n position: absolute;\n}\n\n.truck__wheel--front {\n height: 57%;\n width: 21%;\n bottom: 0;\n left: 75%;\n z-index: 4;\n transform: rotate(2deg);\n}\n\n.truck__wheel--rear {\n height: 57%;\n width: 21%;\n bottom: 2%;\n left: 10%;\n z-index: 4;\n transform: rotate(2deg);\n}\n\n.truck-wheel {\n border-radius: 100%;\n height: calc(var(--width) * 0.15px);\n width: calc(var(--width) * 0.15px);\n background: #242424;\n border-top: 1px solid #ccc;\n position: absolute;\n bottom: 0;\n left: 52%;\n transform: translate(-50%, 0);\n}\n\n.truck-wheel__rim {\n height: 60%;\n width: 60%;\n background: radial-gradient(circle at center, transparent, #666), #0d0d0d;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 100%;\n animation: spin 0.35s infinite linear;\n}\n\n.truck-wheel__rim:after {\n content: \"\";\n height: 35%;\n width: 35%;\n background: radial-gradient(\n circle at center,\n #0d0d0d,\n #0d0d0d 40%,\n transparent 40%\n ),\n radial-gradient(circle at center, #262626, #262626 40%, transparent),\n #8c8c8c;\n border: 1px solid #1a1a1a;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 100%;\n z-index: 2;\n}\n\n@-moz-keyframes spin {\n to {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n@-webkit-keyframes spin {\n to {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n@-o-keyframes spin {\n to {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n@keyframes spin {\n to {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n\n.truck-wheel__spoke {\n position: absolute;\n height: 60%;\n width: 20%;\n background: linear-gradient(0deg, transparent, #1a1a1a 50%), #808080;\n border-left: 1px solid #4d4d4d;\n border-right: 1px solid #333;\n border-radius: 0 0 25% 25%;\n top: 50%;\n left: 50%;\n transform-origin: top center;\n transform: translate(-50%, 0) rotate(calc(360 / 7 * var(--index) * 1deg));\n}\n\n.truck__wheel-arch {\n background: #080808;\n position: absolute;\n top: 0;\n left: 0;\n right: 1%;\n height: 54%;\n -webkit-clip-path: polygon(0 100%, 23% 0, 81% 0%, 95% 60%, 95% 100%);\n clip-path: polygon(0 100%, 23% 0, 81% 0%, 95% 60%, 95% 100%);\n}\n.truck__wheel-arch-trim {\n position: absolute;\n}\n.truck__wheel-arch-trim--top {\n top: 0;\n left: 25%;\n background: #8c8c8c;\n height: 5%;\n width: 53%;\n z-index: 2;\n}\n.truck__wheel-arch-trim--left {\n top: 0;\n left: -20%;\n background: linear-gradient(160deg, transparent, #666), #333;\n height: 5%;\n width: 44%;\n transform-origin: top right;\n transform: rotate(-60deg);\n}\n.truck__wheel-arch-trim--right {\n top: 0;\n left: 79%;\n background: linear-gradient(-158deg, transparent, #666), #333;\n height: 5%;\n width: 35%;\n transform-origin: top left;\n transform: rotate(58deg);\n}\n.truck__body {\n position: absolute;\n height: 100%;\n width: 100%;\n}\n.truck__body--top {\n background: linear-gradient(90deg, #f4f1f1, #bfbfbf 50%), #e8e3e3;\n height: 33%;\n width: 100%;\n top: 0;\n transform: rotate(3deg);\n -webkit-clip-path: polygon(0 100%, 58% 0, 98% 100%);\n clip-path: polygon(0 100%, 58% 0, 98% 100%);\n}\n.truck__body--top:before {\n --groove: #999;\n content: \"\";\n background: linear-gradient(\n 95deg,\n transparent,\n transparent 2%,\n var(--groove) 2%,\n var(--groove) 3%,\n transparent 3%\n ),\n linear-gradient(\n 75deg,\n transparent,\n transparent 47%,\n var(--groove) 47%,\n var(--groove) 48%,\n transparent 48%\n ),\n linear-gradient(\n 78deg,\n transparent,\n transparent 95%,\n var(--groove) 95%,\n var(--groove) 96%,\n transparent 96%\n );\n position: absolute;\n height: 55%;\n width: 40%;\n left: 36%;\n bottom: 0;\n -webkit-clip-path: polygon(0 100%, 0 0, 100% 58%, 100% 100%);\n clip-path: polygon(0 100%, 0 0, 100% 58%, 100% 100%);\n}\n.truck__body--mid {\n position: absolute;\n width: 100%;\n height: 36%;\n top: 25%;\n transform: rotate(3deg);\n transform-origin: top left;\n z-index: 2;\n}\n.truck__body--mid:after {\n content: \"\";\n position: absolute;\n background: #1f1f1f;\n height: 20%;\n width: 5%;\n bottom: 20%;\n right: -0.25%;\n opacity: 1;\n border-left: 1px solid #1a1a1a;\n}\n.truck__body--mid:before {\n content: \"\";\n position: absolute;\n background: #0f0f0f;\n height: 20%;\n width: 5%;\n bottom: 5%;\n right: 0%;\n border-radius: 0 0 50% 25%;\n border-left: 1px solid #141414;\n}\n.truck__body--bottom {\n top: 50%;\n height: 32%;\n}\n.truck__rear-bumper {\n position: absolute;\n height: 1px;\n width: 9%;\n background: #808080;\n top: 38%;\n left: 2.5%;\n transform-origin: top left;\n transform: rotate(3deg);\n}\n.truck__side-skirt {\n height: 1px;\n width: 43%;\n position: absolute;\n bottom: 19%;\n left: 32%;\n transform-origin: top left;\n transform: rotate(1deg);\n background: #808080;\n}\n.truck__underpanel {\n background: #080808;\n height: 65%;\n width: 100%;\n position: absolute;\n bottom: 0;\n -webkit-clip-path: polygon(2% 0, 14% 100%, 88% 100%, 99% 60%, 99% 40%);\n clip-path: polygon(2% 0, 14% 100%, 88% 100%, 99% 60%, 99% 40%);\n}\n.truck__mid-body {\n --groove: #262626;\n height: 100%;\n width: 100%;\n background: linear-gradient(\n 84deg,\n transparent,\n transparent 36.75%,\n var(--groove) 36.75%,\n var(--groove) 37.25%,\n transparent 37.25%\n ),\n linear-gradient(\n 83deg,\n transparent,\n transparent 55.75%,\n var(--groove) 55.75%,\n var(--groove) 56.25%,\n transparent 56.25%\n ),\n linear-gradient(\n 88deg,\n transparent,\n transparent 75%,\n var(--groove) 75%,\n var(--groove) 75.5%,\n transparent 75.5%\n ),\n linear-gradient(90deg, transparent, transparent 96%, #1f1f1f 96%),\n linear-gradient(90deg, transparent, #262626), #333;\n -webkit-clip-path: polygon(0 0, 3% 100%, 80% 84%, 99.5% 78%, 100% 10%, 98% 0);\n clip-path: polygon(0 0, 3% 100%, 80% 84%, 99.5% 78%, 100% 10%, 98% 0);\n}\n.truck__mid-body:after,\n.truck__mid-body:before {\n content: \"\";\n position: absolute;\n width: 4%;\n height: 4%;\n left: 38%;\n top: 6%;\n border: 1px solid #4d4d4d;\n border-radius: 25%;\n}\n.truck__mid-body:before {\n left: 58%;\n}\n.truck__window {\n --window-black: rgba(0, 0, 0, 0.85);\n --window-white: rgba(255, 255, 255, 0.3);\n position: absolute;\n height: 80%;\n width: 60%;\n background: #000;\n left: 37%;\n transform: skew(-5deg);\n -webkit-clip-path: polygon(0 100%, 0 55%, 34.5% 11%, 85% 108%);\n clip-path: polygon(0 100%, 0 55%, 34.5% 11%, 85% 108%);\n}\n.truck__window-glass {\n background: linear-gradient(\n 0deg,\n var(--window-black) 0,\n var(--window-black) 15%,\n transparent 15%\n ),\n linear-gradient(90deg, transparent, var(--window-black) 90%),\n linear-gradient(90deg, var(--window-white), transparent 80%),\n linear-gradient(\n 68deg,\n transparent,\n transparent 30%,\n var(--window-black) 30%,\n var(--window-black) 31%,\n transparent 31%,\n transparent 55%,\n var(--window-black) 55%,\n var(--window-black) 56%,\n transparent 56%\n ),\n var(--window-white);\n position: absolute;\n top: 55%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: 88%;\n width: 98%;\n -webkit-clip-path: polygon(0 100%, 0 55%, 34.5% 11%, 85% 105%);\n clip-path: polygon(0 100%, 0 55%, 34.5% 11%, 85% 105%);\n}\n.truck__window:before {\n content: \"\";\n background: #000;\n position: absolute;\n height: 10%;\n width: 100%;\n bottom: 0;\n transform: rotate(2deg);\n z-index: -1;\n -webkit-clip-path: polygon(40% 100%, 100% -100%, 100% 100%);\n clip-path: polygon(40% 100%, 100% -100%, 100% 100%);\n}\n@-moz-keyframes backdrop {\n from {\n transform: translate(calc(var(--distance) * 1em), 0);\n }\n to {\n transform: translate(calc(var(--distance) * -1em), 0);\n }\n}\n@-webkit-keyframes backdrop {\n from {\n transform: translate(calc(var(--distance) * 1em), 0);\n }\n to {\n transform: translate(calc(var(--distance) * -1em), 0);\n }\n}\n@-o-keyframes backdrop {\n from {\n transform: translate(calc(var(--distance) * 1em), 0);\n }\n to {\n transform: translate(calc(var(--distance) * -1em), 0);\n }\n}\n@keyframes backdrop {\n from {\n transform: translate(calc(var(--distance) * 1em), 0);\n }\n to {\n transform: translate(calc(var(--distance) * -1em), 0);\n }\n}\n"}

wet-goose-61

👁 实时预览

📝 源代码