{"html":"

\n \n \n \n \n

","css":".card {\n width: 11em;\n height: 14.8em;\n position: relative;\n background: #28282B;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 6px solid #F5F5DC;\n border-radius: 5px;\n transition: 0.5s;\n overflow: hidden;\n}\n\n.card .circle {\n width: 8em;\n height: 14em;\n border-radius: 50%;\n transform: skew(-25deg);\n border: 4px solid white;\n display: grid;\n grid-template-columns: 1fr 1fr;\n}\n\n.card .circle.small {\n position: absolute;\n width: 1.5em;\n height: 3em;\n border: 1px solid white;\n}\n\n.card .circle.top-left {\n top: 0.3em;\n left: 0.6em;\n}\n\n.card .circle.bottom-right {\n bottom: 0.3em;\n right: 0.6em;\n}\n\n.card:hover {\n cursor: pointer;\n transform: translate(0, -5px);\n}\n\n.card:hover:after, .card:hover:before {\n visibility: hidden;\n}\n\n.card .circle span:nth-child(1) {\n background-color: #FF2400;\n border-top-left-radius: 100%;\n}\n\n.card .circle span:nth-child(2) {\n background-color: #1F51FF;\n border-top-right-radius: 100%;\n}\n\n.card .circle span:nth-child(3) {\n background-color: #FFEA00;\n border-bottom-left-radius: 100%;\n}\n\n.card .circle span:nth-child(4) {\n background-color: #50C878;\n border-bottom-right-radius: 100%;\n}\n\n/* glider animation */\n.card:before {\n content: '';\n position: absolute;\n height: 130%;\n width: 1em;\n background-color: aliceblue;\n opacity: 0.14;\n animation: glider 1.8s infinite linear;\n animation-delay: 0.05s;\n}\n\n.card:after {\n content: '';\n position: absolute;\n height: 120%;\n width: 0.8em;\n background-color: aliceblue;\n opacity: 0.1;\n animation: glider 1.8s infinite linear;\n}\n\n@keyframes glider {\n 0% {\n transform: rotate(45deg) translate(-12em, 1.2em);\n }\n\n 100% {\n transform: rotate(45deg) translate(18em, -2.8em);\n }\n}"}

average-goat-70

👁 实时预览

📝 源代码