{"html":"

\n \n \n Team 1\n \n \n \n \n \n \n 85'\n 2H\n \n \n \n \n \n \n 2\n -\n 4\n \n \n \n \n \n \n Team 2\n \n \n

\n","css":".card * {\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n}\n.card .teams {\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n background: linear-gradient(90deg, transparent, #111, transparent);\n}\n.card .teams > span {\n flex: 1;\n text-align: center;\n position: relative;\n font-size: 13px;\n text-wrap: nowrap;\n}\n.card .teams .team-name-info {\n text-wrap: nowrap;\n color: #ffffff;\n max-width: 210px;\n text-overflow: ellipsis;\n font-weight: 600;\n overflow: hidden;\n display: block;\n}\n.card .teams span.progress-dots {\n height: 3px;\n position: relative;\n width: 60px;\n display: block;\n overflow: hidden;\n margin: 0;\n border-radius: 10px;\n}\n.card .teams span.progress-dots .load {\n background: linear-gradient(90deg, #3a3dff, #ff2929);\n display: block;\n height: 1.5px;\n width: 3px;\n bottom: 0;\n position: absolute;\n transform: translateX(0px);\n animation: loading_dots 7.5s ease both infinite;\n}\n@keyframes loading_dots {\n 0% {\n width: 3px;\n transform: translateX(0px);\n }\n 40% {\n width: 3px;\n transform: translateX(57px);\n }\n\n 75% {\n width: 100%;\n transform: translateX(0px);\n }\n 100% {\n width: 3px;\n transform: translateX(0px);\n }\n}\n.card .teams .team-home,\n.card .teams .team-away {\n padding: 15px 37px;\n position: relative;\n overflow: hidden;\n}\n.card .teams .team-away {\n transform: skew(-41deg, 0deg);\n border-radius: 10px 10px 30px 10px;\n}\n.card .teams .team-home {\n border-radius: 10px 10px 10px 30px;\n transform: skew(41deg, 0deg);\n}\n.card .teams .team-home::after {\n position: absolute;\n top: -3px;\n background: #00caff;\n content: \"\";\n height: 23px;\n border-radius: 27px;\n left: -20px;\n filter: blur(2px);\n transform: rotate(208deg);\n width: 20px;\n box-shadow: 0px 0px 32px #00ffed;\n}\n.card .teams .team-home::before {\n position: absolute;\n bottom: -15px;\n background: #0048ff;\n content: \"\";\n height: 17px;\n border-radius: 80px;\n right: 0;\n filter: blur(1px);\n transform: translate(-50%, 0%);\n width: 80%;\n box-shadow: 0px 0px 32px #0026ff;\n}\n.card .teams .team-away::after {\n position: absolute;\n top: -3px;\n background: #cc9d00;\n content: \"\";\n height: 23px;\n border-radius: 27px;\n right: -20px;\n filter: blur(2px);\n transform: rotate(208deg);\n width: 20px;\n box-shadow: 0px 0px 32px #cc3700;\n}\n.card .teams .team-away::before {\n position: absolute;\n bottom: -15px;\n background: #ff0000;\n content: \"\";\n height: 17px;\n border-radius: 80px;\n left: 0;\n filter: blur(1px);\n transform: translate(50%, 0%);\n width: 80%;\n box-shadow: 0px 0px 32px #d50000;\n}\n\n.card .teams .team-home .team-name-info {\n transform: skew(-41deg, 0);\n}\n.card .teams .team-away .team-name-info {\n transform: skew(41deg, 0);\n}\n\n.event-info-banner .info-heading {\n position: absolute;\n right: 12px;\n bottom: 5px;\n color: rgba(255, 255, 255, 0.2);\n margin: 0;\n}\n.card .event-scoreboard .event-score-container {\n display: flex;\n flex-wrap: wrap;\n padding: 10px;\n border-radius: 10px;\n width: fit-content;\n background: linear-gradient(#1e1e1e 0%, #0c0c0c8e 4%, #1a1419);\n box-shadow:\n inset 0 0 1px 0 #2c2c2c,\n 0 0 20px 0 #1313139c;\n margin: 10px 0;\n}\n.card .event-scoreboard .event-score-container .score-container {\n font-size: 24px;\n background: linear-gradient(90deg, #3a3dff, #ff2929);\n -webkit-background-clip: text;\n width: 100%;\n -webkit-text-fill-color: transparent;\n}\n.card .event-scoreboard .event-score-container .current-time-container {\n font-size: 12px;\n margin-bottom: 8px;\n width: 100%;\n font-family: \"SegoeUI\";\n color: #a1a1a1;\n justify-content: center;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n row-gap: 5px;\n}\n.card\n .event-scoreboard\n .event-score-container\n .current-time-container\n .event-clock {\n font-weight: 500;\n color: #eee;\n margin-right: 10px;\n}\n"}

jolly-snail-62

👁 实时预览

📝 源代码