{"html":"

\n \n \n

\n Place Order\n Done\n

\n ⚠️\n

\n \n

\n","css":".container {\n position: absolute;\n width: 500px;\n height: 500px;\n margin: auto;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.btn {\n position: absolute;\n width: 40%;\n height: 12%;\n background: linear-gradient(\n to bottom,\n rgb(0, 4, 218) 10%,\n rgb(24, 115, 252) 50%,\n rgb(0, 162, 255) 100%\n );\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 7px;\n overflow: hidden;\n user-select: none;\n border: 2px solid #0313fc;\n transition: 0.5s;\n}\n\n.btn:hover {\n transform: scale(1.1);\n}\n\n.stars {\n position: absolute;\n width: 2px;\n height: 2px;\n background-color: white;\n z-index: 3;\n border-radius: 50%;\n transform: translate(-20px, -20px);\n box-shadow:\n 5px 10px white,\n 10px -2px white,\n 20px 0px white,\n 30px -5px white,\n -10px -5px white,\n -15px 2px white,\n -35px 0px white,\n 5px 10px white,\n 10px -2px white,\n 20px 0px white,\n 30px -5px white,\n -10px -5px white,\n -15px 2px white,\n -35px 0px white,\n 50px 15px white,\n 60px -10px white,\n 70px 20px white,\n 90px -15px white,\n 100px 5px white,\n 110px -25px white,\n 90px 30px white,\n 80px -40px white,\n -50px 20px white,\n -70px -10px white,\n -90px 25px white,\n -100px -15px white,\n -110px 10px white,\n -90px -35px white,\n -80px 40px white,\n 40px 40px white,\n 30px -40px white,\n -30px 30px white,\n -40px -25px white,\n 60px 60px white,\n -60px -60px white,\n 70px -70px white,\n -70px 70px white,\n 0px 80px white,\n 0px -90px white,\n 90px 0px white,\n -100px 0px white,\n 45px 5px white,\n 65px 0px white,\n 75px 10px white,\n -60px 10px white,\n -40px 10px white,\n -45px -8px white,\n -55px -2px white,\n -30px 17px white;\n}\n\n.background {\n width: 50%;\n height: 160%;\n background-color: white;\n position: absolute;\n border-radius: 50%;\n transform: translate(-100%, 50%);\n box-shadow:\n -30px -40px 0px -7px #ffffffd8,\n 40px 14px rgba(255, 255, 255, 0.507);\n}\n\n.background::before {\n content: \"\";\n width: 80%;\n height: 80%;\n background-color: white;\n position: absolute;\n border-radius: 50%;\n transform: translate(110%, 20%);\n box-shadow: 50px -5px #ffffffb2;\n}\n\n.background::after {\n content: \"\";\n width: 120%;\n height: 120%;\n background-color: white;\n position: absolute;\n border-radius: 50%;\n transform: translate(120%, 10%);\n box-shadow: 50px -20px #ffffffd8;\n}\n\n.order {\n color: white;\n font-weight: 600;\n font-size: 1.04rem;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n}\n\n.done {\n position: absolute;\n color: #0313fc;\n font-weight: 600;\n font-size: 1.04rem;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n}\n\n.car-container {\n position: absolute;\n height: 60%;\n width: 20%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.car-part1 {\n position: absolute;\n width: 60%;\n height: 20%;\n background-color: #fed54a;\n bottom: 30%;\n left: 10%;\n}\n\n.car-part1::before {\n position: absolute;\n content: \"\";\n width: 75%;\n height: 220%;\n background-color: #b1c5ed;\n left: 20%;\n bottom: 100%;\n clip-path: polygon(0% 100%, 10% 0%, 80% 0%, 100% 100%);\n}\n\n.car-part1::after {\n position: absolute;\n content: \"\";\n width: 50%;\n height: 100%;\n background-color: #fed54a;\n left: 0%;\n bottom: 100%;\n clip-path: polygon(0% 100%, 0% 0%, 50% 0%, 100% 100%);\n}\n\n.wheels {\n position: absolute;\n width: 28%;\n height: 35%;\n background-color: black;\n border-radius: 50%;\n left: 5%;\n bottom: 15%;\n}\n\n.wheels::before {\n content: \"\";\n position: absolute;\n width: 80%;\n height: 70%;\n background-color: black;\n border-radius: 50%;\n left: 180%;\n bottom: 0%;\n}\n\n.car-part2 {\n position: absolute;\n width: 7%;\n height: 70%;\n background-color: black;\n left: 68%;\n bottom: 25%;\n}\n\n.car-part2::before {\n content: \"\";\n position: absolute;\n width: 155%;\n height: 50%;\n background-color: black;\n left: 0%;\n bottom: 0%;\n}\n\n.car-part2::after {\n content: \"\";\n position: absolute;\n width: 555%;\n height: 6%;\n background-color: black;\n left: 0%;\n bottom: 0%;\n}\n\n.details {\n position: absolute;\n width: 30%;\n height: 3%;\n background-color: #fed54a;\n top: 5%;\n left: 25%;\n}\n\n.details::before {\n content: \"\";\n position: absolute;\n width: 50%;\n height: 650%;\n border-radius: 50%;\n background-color: #fed54a;\n top: 1750%;\n left: -45%;\n}\n\n.details::after {\n content: \"\";\n position: absolute;\n width: 30%;\n height: 400%;\n border-radius: 50%;\n background-color: #fed54a;\n top: 2060%;\n left: 125%;\n}\n\n.package-container {\n position: absolute;\n width: 25%;\n height: 80%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.package {\n position: absolute;\n width: 45%;\n height: 40%;\n background-color: #ffb571;\n}\n\n.package::after {\n content: \"\";\n position: absolute;\n width: 50%;\n height: 5%;\n background-color: #d57d2b;\n right: 0%;\n top: -2%;\n transform: rotate(210deg);\n transform-origin: right;\n animation: close 0.5s ease-in-out 0.3s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-play-state: paused;\n}\n\n.package::before {\n content: \"\";\n position: absolute;\n width: 50%;\n height: 5%;\n background-color: #d57d2b;\n left: 0%;\n top: -2%;\n transform: rotate(-210deg);\n transform-origin: left;\n animation: close2 0.5s ease-in-out 0.3s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-play-state: paused;\n}\n\n@keyframes close {\n 0% {\n transform: rotate(210deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes close2 {\n 0% {\n transform: rotate(-210deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n}\n\n.package-details {\n position: absolute;\n background-color: #754433;\n width: 10%;\n height: 10%;\n top: 30%;\n}\n\n.package-details::before {\n content: \"\";\n position: absolute;\n background-color: #ededed;\n width: 100%;\n height: 100%;\n bottom: -280%;\n left: -150%;\n}\n\n.package-details::after {\n content: \"\";\n position: absolute;\n background-color: #8f8f8f;\n width: 40%;\n height: 40%;\n bottom: -230%;\n left: -105%;\n}\n\n.package-text {\n position: absolute;\n z-index: 2;\n bottom: 32%;\n right: 30%;\n font-size: 0.3rem;\n}\n\n/*Whole Animation*/\n.background {\n transform: translate(-100%, 50%) scale(1);\n animation: scale 1s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-play-state: paused;\n}\n.package-container {\n transform: translate(0%, 100%);\n animation: package 6s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-play-state: paused;\n}\n\n.done {\n transform: translate(-310%);\n animation: text2 6s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-play-state: paused;\n}\n\n.order {\n transform: translate(0%, 0%);\n animation: text 6s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-play-state: paused;\n}\n\n.car-container {\n transform: translate(-310%, 8%);\n animation: car 6s ease;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-play-state: paused;\n}\n\n@keyframes scale {\n 0% {\n transform: translate(-100%, 50%) scale(1);\n animation: scale 1s;\n }\n 100% {\n transform: translate(-100%, 50%) scale(5);\n animation: scale 1s;\n }\n}\n\n@keyframes package {\n 0% {\n transform: translate(0%, 100%);\n }\n 10%,\n 50% {\n transform: translate(0%, 0%);\n }\n 100% {\n transform: translate(325%, 0%);\n }\n}\n\n@keyframes text {\n 0% {\n transform: translate(0%, 0%);\n }\n 10%,\n 100% {\n transform: translate(0%, -200%);\n }\n}\n\n@keyframes text2 {\n 0%,\n 50% {\n transform: translate(-310%);\n }\n 100% {\n transform: translate(0%);\n }\n}\n\n@keyframes car {\n 0%,\n 10% {\n transform: translate(-310%, 8%);\n }\n 45%,\n 50% {\n transform: translate(-60%, 8%);\n }\n 100% {\n transform: translate(350%, 8%);\n }\n}\n\n#trigger {\n width: 40%;\n height: 12%;\n z-index: 2;\n display: none;\n}\n\n#trigger:checked + .btn .package-container,\n#trigger:checked + .btn .order,\n#trigger:checked + .btn .done,\n#trigger:checked + .btn .car-container,\n#trigger:checked + .btn .package::after,\n#trigger:checked + .btn .package::before,\n#trigger:checked + .btn .background {\n animation-play-state: running;\n}\n\n#trigger:not(:checked) + .btn .package-container,\n#trigger:not(:checked) + .btn .order,\n#trigger:not(:checked) + .btn .done,\n#trigger:not(:checked) + .btn .car-container,\n#trigger:not(:checked) + .btn .package::after,\n#trigger:not(:checked) + .btn .package::before,\n#trigger:not(:checked) + .btn .background {\n animation: none;\n}\n\n#trigger:checked + .btn .stars {\n display: none;\n}\n"}

grumpy-dragonfly-93

👁 实时预览

📝 源代码