{"html":"\n \n \n Click To Finish Checkout\n Order Delivered\n \n \n

\n \n\n","css":".order {\n appearance: none;\n border: 0;\n background: #1a1919e8;\n position: relative;\n height: 63px;\n width: 240px;\n padding: 0;\n outline: none;\n cursor: pointer;\n border-radius: 4px;\n overflow: hidden;\n font-family: \"Poppins\", sans-serif;\n transition: transform 0.3s ease;\n display: inline-block;\n box-shadow:\n rgb(83, 83, 83) 3px 3px 6px 0px inset,\n rgb(0, 0, 0) -3px -3px 6px 1px inset;\n}\n\n.order:hover {\n transform: translateY(-2px) scale(1.02);\n background: #2a2929;\n box-shadow:\n 0 6px 15px rgba(0, 0, 0, 0.4),\n inset 1px 1px 3px rgba(255, 255, 255, 0.05),\n inset -1px -1px 3px rgba(0, 0, 0, 0.4);\n}\n.order span {\n --o: 1;\n position: absolute;\n left: 0;\n right: 0;\n text-align: center;\n top: 19px;\n line-height: 24px;\n color: #ffffff;\n font-size: 16px;\n font-weight: 500;\n opacity: var(--o);\n transition: opacity 0.3s ease;\n}\n\n.order span.default {\n transition-delay: 0.3s;\n}\n\n.order span.success {\n --offset: 16px;\n --o: 0;\n}\n\n.order span.success svg {\n width: 12px;\n height: 10px;\n display: inline-block;\n vertical-align: top;\n fill: none;\n margin: 7px 0 0 4px;\n stroke: #16bf78;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 16px;\n stroke-dashoffset: var(--offset);\n transition: stroke-dashoffset 0.3s ease;\n}\n\n.order .lines {\n opacity: 0;\n position: absolute;\n height: 6px;\n background: #ffffff;\n border-radius: 2px;\n width: 10px;\n top: 30px;\n left: 100%;\n box-shadow:\n 15px 0 0 #fff,\n 30px 0 0 #fff,\n 45px 0 0 #fff,\n 60px 0 0 #fff,\n 75px 0 0 #fff,\n 90px 0 0 #fff,\n 105px 0 0 #fff,\n 120px 0 0 #fff,\n 135px 0 0 #fff,\n 150px 0 0 #fff,\n 165px 0 0 #fff,\n 180px 0 0 #fff,\n 195px 0 0 #fff,\n 210px 0 0 #fff,\n 225px 0 0 #fff,\n 240px 0 0 #fff,\n 255px 0 0 #fff,\n 270px 0 0 #fff,\n 285px 0 0 #fff,\n 300px 0 0 #fff,\n 315px 0 0 #fff,\n 330px 0 0 #fff;\n}\n\n.order .back,\n.order .box {\n border-radius: 2px;\n background: linear-gradient(#ffffff, #cdd9ed);\n position: absolute;\n}\n\n.order .truck {\n width: 60px;\n height: 41px;\n left: 100%;\n top: 11px;\n position: absolute;\n z-index: 1;\n transform: translateX(24px);\n}\n\n.order .truck:before,\n.order .truck:after {\n --r: -90deg;\n content: \"\";\n height: 2px;\n width: 20px;\n right: 58px;\n position: absolute;\n display: block;\n background: #ffffff;\n border-radius: 1px;\n transform-origin: 100% 50%;\n transform: rotate(var(--r));\n}\n\n.order .truck:before {\n top: 4px;\n}\n.order .truck:after {\n --r: 90deg;\n bottom: 4px;\n}\n\n.order .truck .back {\n left: 0;\n top: 0;\n width: 100px;\n height: 41px;\n z-index: 1;\n}\n\n.order .truck .front {\n overflow: hidden;\n position: absolute;\n border-radius: 2px 9px 9px 2px;\n width: 26px;\n height: 41px;\n left: 100px;\n}\n\n.order .truck .front:before {\n height: 13px;\n width: 2px;\n left: 0;\n top: 14px;\n background: linear-gradient(#6c7486, #3f4656);\n content: \"\";\n position: absolute;\n}\n\n.order .truck .front:after {\n border-radius: 2px 9px 9px 2px;\n background: #f19203;\n width: 24px;\n height: 41px;\n right: 0;\n content: \"\";\n position: absolute;\n}\n\n.order .truck .front .window {\n overflow: hidden;\n border-radius: 2px 8px 8px 2px;\n background: #ffd699;\n transform: perspective(4px) rotateY(3deg);\n width: 22px;\n height: 41px;\n position: absolute;\n left: 2px;\n top: 0;\n z-index: 1;\n transform-origin: 0 50%;\n}\n\n.order .truck .front .window:before {\n content: \"\";\n top: 0;\n bottom: 0;\n width: 14px;\n right: 0;\n position: absolute;\n background: #1c212e;\n}\n\n.order .truck .front .window:after {\n content: \"\";\n width: 14px;\n top: 7px;\n height: 4px;\n right: 0;\n position: absolute;\n background: rgba(255, 255, 255, 0.14);\n transform: skewY(14deg);\n box-shadow: 0 7px 0 rgba(255, 255, 255, 0.14);\n}\n\n.order .truck .light {\n width: 3px;\n height: 8px;\n left: 122px;\n position: absolute;\n border-radius: 2px;\n background: #ffffff;\n}\n\n.order .truck .light.top {\n top: 4px;\n}\n.order .truck .light.bottom {\n bottom: 4px;\n}\n\n.order .truck .light:before {\n content: \"\";\n height: 4px;\n width: 7px;\n opacity: 0;\n position: absolute;\n transform: perspective(2px) rotateY(-15deg) scaleX(0.94);\n left: 3px;\n top: 50%;\n margin-top: -2px;\n background: linear-gradient(\n 90deg,\n #ffffff,\n rgba(255, 255, 255, 0.7),\n rgba(240, 220, 95, 0)\n );\n}\n\n/* Checked state animation triggers */\n#order-toggle:checked + .order {\n pointer-events: none;\n}\n#order-toggle:checked + .order .default {\n --o: 0;\n transition-delay: 0s;\n}\n#order-toggle:checked + .order .success {\n --offset: 0;\n --o: 1;\n transition-delay: 7s;\n}\n#order-toggle:checked + .order .success svg {\n transition-delay: 7.3s;\n}\n#order-toggle:checked + .order .truck {\n animation: truck 10s ease forwards;\n}\n#order-toggle:checked + .order .truck:before {\n animation: door1 2.4s ease forwards 0.3s;\n}\n#order-toggle:checked + .order .truck:after {\n animation: door2 2.4s ease forwards 0.6s;\n}\n#order-toggle:checked + .order .truck .light:before {\n animation:\n light 10s ease forwards,\n headlight-pulse 1.5s ease-in-out infinite;\n}\n\n#order-toggle:checked + .order .lines {\n animation: lines 10s ease forwards;\n}\n\n/* Animations */\n@keyframes truck {\n 10%,\n 30% {\n transform: translateX(-164px);\n }\n 40% {\n transform: translateX(-104px);\n }\n 60% {\n transform: translateX(-224px);\n }\n 75%,\n 100% {\n transform: translateX(24px);\n }\n}\n@keyframes lines {\n 0%,\n 30% {\n opacity: 0;\n transform: scaleY(0.7) translateX(0);\n }\n 35%,\n 65% {\n opacity: 1;\n }\n 70% {\n opacity: 0;\n }\n 100% {\n transform: scaleY(0.7) translateX(-400px);\n }\n}\n@keyframes light {\n 0%,\n 30% {\n opacity: 0;\n transform: perspective(2px) rotateY(-15deg) scaleX(0.88);\n }\n 40%,\n 100% {\n opacity: 1;\n transform: perspective(2px) rotateY(-15deg) scaleX(0.94);\n }\n}\n\n/* New: Headlight Pulse */\n@keyframes headlight-pulse {\n 0%,\n 100% {\n opacity: 0;\n box-shadow: none;\n }\n 50% {\n opacity: 1;\n box-shadow: 0 0 10px 3px rgba(255, 255, 200, 0.7);\n }\n}\n"}

soft-dragon-60

👁 实时预览

📝 源代码