{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n

Argentina

ARG

\n \n \n \n \n 06:00\n

\n \n \n \n

Bolivia

BOL

\n \n \n \n \n 14:00\n

762151

Passenger

Flight

BK165

Gate

A11

Seat

21C

\n \n \n \n

\n \n \n \n \n \n

\n","css":".container-cards-ticket {\n perspective: 1000px;\n}\n\n.card-ticket {\n position: relative;\n height: 150px;\n width: 320px;\n display: flex;\n color: #2d2d2d;\n background-color: #ffffff;\n border-radius: 1rem;\n transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.25);\n z-index: 10;\n gap: 1rem;\n animation: animation-card 10s infinite;\n overflow: hidden;\n\n &:hover {\n animation-play-state: paused;\n transform: translateY(-30px);\n\n & .content-ticket::after,\n & .content-ticket::before,\n & .container-icons {\n animation-play-state: paused;\n }\n }\n}\n\n.separator {\n position: absolute;\n top: 0;\n left: 50px;\n width: 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n z-index: 10;\n\n & .span-lines {\n position: relative;\n display: flex;\n height: 100%;\n border-left: 2px dashed #e8e8e8;\n\n &::after {\n content: \"\";\n position: absolute;\n top: -8px;\n left: 50%;\n transform: translateX(-50%);\n width: 16px;\n height: 16px;\n border-radius: 16px;\n background-color: #e8e8e8;\n }\n\n &::before {\n content: \"\";\n position: absolute;\n bottom: -8px;\n left: 50%;\n transform: translateX(-50%);\n width: 16px;\n height: 16px;\n border-radius: 1rem;\n background-color: #e8e8e8;\n }\n }\n}\n\n.content-ticket {\n position: relative;\n justify-content: space-between;\n width: 100%;\n display: flex;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n background-image: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.8)\n );\n transform: translateX(200px) scale(1.5);\n filter: blur(10px);\n width: 200px;\n height: 100%;\n animation: shadow-card 10s infinite;\n }\n\n &::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100px;\n background-image: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0),\n #ffffff,\n rgba(0, 0, 0, 0)\n );\n transform: translateX(-100px) scale(1.5) rotate(20deg);\n width: 80px;\n height: 100%;\n animation: light-card 10s infinite;\n }\n}\n\n.content-data {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n padding: 0.625rem 0.75rem;\n gap: 0.25rem;\n\n & .data-flex,\n & .data-flex-col {\n width: 100%;\n display: flex;\n justify-content: space-between;\n gap: 0.25rem;\n }\n\n & .data-flex-col {\n padding-bottom: 0.25rem;\n flex-direction: column;\n }\n}\n\n.data {\n font-size: 10px;\n line-height: 12px;\n\n & .title {\n color: #aeaeae;\n }\n\n & .subtitle {\n font-weight: 500;\n color: #212121;\n }\n}\n\n.destination {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n & .dest {\n display: flex;\n flex-direction: column;\n\n & .country {\n font-size: 10px;\n line-height: 1;\n color: #aeaeae;\n }\n\n & .acronym {\n font-weight: 700;\n color: #2d2d2d;\n }\n\n & .hour {\n font-size: 10px;\n line-height: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n color: #2d2d2d;\n }\n }\n}\n\n.container-icons {\n width: fit-content;\n padding: 0.625rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n animation: color-card 10s infinite;\n z-index: -1;\n\n & .icon {\n color: #ffffff;\n }\n}\n\n@keyframes animation-card {\n 0% {\n transform: translateZ(0px);\n }\n\n 25% {\n transform: translateX(-10px) rotateY(-20deg);\n }\n\n 75% {\n transform: translateX(10px) rotateY(20deg);\n }\n\n 100% {\n transform: translateZ(0px);\n }\n}\n\n@keyframes light-card {\n 25% {\n transform: translateX(450px) scale(1.5) rotate(25deg);\n }\n\n 50% {\n transform: translateX(-100px) scale(1.5) rotate(25deg);\n }\n}\n\n@keyframes shadow-card {\n 35% {\n transform: translateX(200px) scale(1.5);\n }\n\n 75% {\n transform: translateX(0px) scale(1.5);\n }\n}\n\n@keyframes color-card {\n 0% {\n background-color: #ffbd44;\n }\n\n 10% {\n background-color: #fb6902;\n }\n\n 15%,\n 25% {\n background-color: #ff4141;\n }\n\n 35% {\n background-color: #fb6902;\n }\n\n 40% {\n background-color: #ffbd44;\n }\n\n 50% {\n background-color: #fb6902;\n }\n\n 55%,\n 75% {\n background-color: #ff4141;\n }\n\n 75% {\n background-color: #fb6902;\n }\n\n 100% {\n background-color: #ffbd44;\n }\n}\n"}

clever-shrimp-61

👁 实时预览

📝 源代码