{"html":"\n

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

\n Stance and Aim\n

Visualize the trajectory and mentally aim for your desired spot.

\n","css":".card {\n width: 370px;\n height: 270px;\n background: linear-gradient(120deg, rgba(255,237,57,1) 0%, rgba(247,253,45,1) 100%);\n ;\n position: relative;\n display: flex;\n justify-content: center;\n padding: 20px;\n border-radius: 15px;\n transition: all 0.5s ease;\n}\n\n.card::before {\n content: 'Dart';\n position: absolute;\n width: 0px;\n height: 60px;\n border-left: 30px solid #3A486F;\n border-right: 30px solid #3A486F;\n border-bottom: 10px solid transparent;\n top: -10px;\n left: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 8px;\n text-transform: uppercase;\n transition: all 0.5s ease;\n}\n\n.svg-icon {\n width: 5em;\n height: 5em;\n fill: #3A486F;\n}\n\n.svgContainer {\n height: 100px;\n width: 100px;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.svgContainer svg {\n position: absolute;\n overflow: visible;\n}\n\n.dartboard {\n width: 2em;\n height: 2em;\n padding: 6px;\n border: 3px solid #3A486F;\n border-radius: 50%;\n transition: all 0.5s ease;\n transform: scale(2) rotate(34deg);\n}\n\n.eyehole {\n transform: scale(1.2) rotate(-270deg);\n transition: all 0.5s ease;\n}\n\n.batman {\n transition: all .4s ease-in;\n transform: rotate(55deg) translate(240px, -45px) scale(1.2);\n}\n\n.svg-fill-primary {\n fill: #242424;\n}\n\n.card-info {\n display: flex;\n flex-direction: column;\n justify-content: end;\n text-align: center;\n gap: 10px;\n align-items: center;\n}\n\n.card span {\n font-size: 20px;\n font-weight: 700;\n text-transform: uppercase;\n}\n\n.card-info p {\n color: #3A486F;\n font-weight: 600;\n}\n\n.card-info .challengeButton {\n text-decoration: none;\n background-color: #343434;\n color: white;\n padding: 5px 15px;\n border-radius: 10px;\n box-sizing: border-box;\n transition: all 0.5s ease;\n}\n\n.card:hover {\n box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.83);\n}\n\n.card:hover .batman {\n transform: rotate(-50deg) translate(12px, 2px);\n}\n\n.card:hover .eyehole {\n transform: scale(1);\n}\n\n.card:hover .dartboard {\n transform: scale(1) rotate(0deg) translate(0, 0);\n}\n\n.challengeButton:hover {\n background-color: #3A486F;\n}\n\n.card:hover::before {\n border-left: 30px solid #182445;\n border-right: 30px solid #182445;\n border-bottom: 10px solid transparent;\n top: -15px;\n}"}

tender-robin-5

👁 实时预览

📝 源代码