{"html":"

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

1st

\n \n \n \n

Jessie Ben

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

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

SCORE

1105

\n","css":".cards {\n position: relative;\n height: 150px;\n transition-duration: 0.5s;\n background: none;\n overflow: hidden;\n}\n\n.cards:hover {\n height: 270px;\n}\n\n.cards:hover .outlinePage {\n box-shadow: 0 10px 15px #b1985e;\n}\n\n.cards:hover .detailPage {\n display: flex;\n}\n\n.outlinePage {\n position: relative;\n background: linear-gradient(45deg, #fffbf0, #ffdd87);\n width: 300px;\n height: 150px;\n border-radius: 25px;\n transition-duration: 0.5s;\n z-index: 2;\n}\n\n.detailPage {\n position: relative;\n display: none;\n width: 300px;\n height: 120px;\n background: white;\n top: -20px;\n z-index: 1;\n transition-duration: 1s;\n border-radius: 0 0 25px 25px;\n overflow: hidden;\n align-items: center;\n justify-content: flex-start;\n}\n\n.splitLine {\n position: absolute;\n width: 200px;\n height: 10px;\n top: 100px;\n background-image: linear-gradient(\n to right,\n transparent 10%,\n #ffe8a0 20%,\n #f7b733 50%,\n #ffe8a0 70%,\n transparent 90%\n );\n z-index: 1;\n}\n\n.trophy {\n position: absolute;\n right: 0px;\n top: 4px;\n z-index: 2;\n}\n\n.ranking_number {\n position: relative;\n color: #ffc64b;\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n font-weight: 700;\n font-size: 80px;\n left: 20px;\n padding: 0;\n margin: 0;\n top: -5px;\n}\n\n.ranking_word {\n position: relative;\n font-size: 40px;\n color: #424c50;\n}\n\n.userAvatar {\n position: absolute;\n bottom: 6px;\n left: 20px;\n}\n\n.userName {\n position: relative;\n font-weight: 600;\n color: #6b7578;\n left: 55px;\n font-size: 18px;\n top: -2px;\n}\n\n.medals {\n position: absolute;\n top: 15px;\n right: 5px;\n}\n\n.gradesBox {\n position: relative;\n height: 75px;\n top: 10px;\n margin-right: 10px;\n margin-left: 15px;\n}\n\n.gradesIcon {\n position: absolute;\n top: 10px;\n}\n\n.gradesBoxLabel {\n position: relative;\n display: block;\n margin-left: 60px;\n color: #424c50;\n letter-spacing: 6px;\n font-family: Arial, Helvetica, sans-serif;\n margin-top: 20px;\n font-weight: 800;\n font-size: 13px;\n}\n\n.gradesBoxNum {\n position: relative;\n font-family: Arial, Helvetica, sans-serif;\n display: block;\n font-size: 25px;\n font-weight: 800;\n margin-left: 60px;\n color: #ea9518;\n top: -5px;\n}\n\n.timeNum {\n color: #6cabf6;\n}\n\n.slide-in-top {\n animation: slide-in-top 1s cubic-bezier(0.65, 0.05, 0.36, 1) both;\n}\n\n@keyframes slide-in-top {\n 0% {\n transform: translateY(-100px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n"}

ugly-horse-87

👁 实时预览

📝 源代码