{"html":"

This is heading

Card description with lots of great facts and interesting details.

","css":".card p {\n font-size: 17px;\n font-weight: 400;\n line-height: 20px;\n color: #666;\n}\n\n.card p.small {\n font-size: 14px;\n}\n\n.go-corner {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n width: 32px;\n height: 32px;\n overflow: hidden;\n top: 0;\n right: 0;\n background-color: #00838d;\n border-radius: 0 4px 0 32px;\n}\n\n.go-arrow {\n margin-top: -4px;\n margin-right: -4px;\n color: white;\n font-family: courier, sans;\n}\n\n.card1 {\n display: block;\n position: relative;\n max-width: 262px;\n background-color: #f2f8f9;\n border-radius: 4px;\n padding: 32px 24px;\n margin: 12px;\n text-decoration: none;\n z-index: 0;\n overflow: hidden;\n}\n\n.card1:before {\n content: \"\";\n position: absolute;\n z-index: -1;\n top: -16px;\n right: -16px;\n background: #00838d;\n height: 32px;\n width: 32px;\n border-radius: 32px;\n transform: scale(1);\n transform-origin: 50% 50%;\n transition: transform 0.25s ease-out;\n}\n\n.card1:hover:before {\n transform: scale(21);\n}\n\n.card1:hover p {\n transition: all 0.3s ease-out;\n color: rgba(255, 255, 255, 0.8);\n}\n\n.card1:hover h3 {\n transition: all 0.3s ease-out;\n color: #fff;\n}\n\n.card2 {\n display: block;\n top: 0px;\n position: relative;\n max-width: 262px;\n background-color: #f2f8f9;\n border-radius: 4px;\n padding: 32px 24px;\n margin: 12px;\n text-decoration: none;\n z-index: 0;\n overflow: hidden;\n border: 1px solid #f2f8f9;\n}\n\n.card2:hover {\n transition: all 0.2s ease-out;\n box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);\n top: -4px;\n border: 1px solid #ccc;\n background-color: white;\n}\n\n.card2:before {\n content: \"\";\n position: absolute;\n z-index: -1;\n top: -16px;\n right: -16px;\n background: #00838d;\n height: 32px;\n width: 32px;\n border-radius: 32px;\n transform: scale(2);\n transform-origin: 50% 50%;\n transition: transform 0.15s ease-out;\n}\n\n.card2:hover:before {\n transform: scale(2.15);\n}\n\n.card3 {\n display: block;\n top: 0px;\n position: relative;\n max-width: 262px;\n background-color: #f2f8f9;\n border-radius: 4px;\n padding: 32px 24px;\n margin: 12px;\n text-decoration: none;\n overflow: hidden;\n border: 1px solid #f2f8f9;\n}\n\n.card3 .go-corner {\n opacity: 0.7;\n}\n\n.card3:hover {\n border: 1px solid #00838d;\n box-shadow: 0px 0px 999px 999px rgba(255, 255, 255, 0.5);\n z-index: 500;\n}\n\n.card3:hover p {\n color: #00838d;\n}\n\n.card3:hover .go-corner {\n transition: opactiy 0.3s linear;\n opacity: 1;\n}\n\n.card4 {\n display: block;\n top: 0px;\n position: relative;\n max-width: 262px;\n background-color: #fff;\n border-radius: 4px;\n padding: 32px 24px;\n margin: 12px;\n text-decoration: none;\n overflow: hidden;\n border: 1px solid #ccc;\n}\n\n.card4 .go-corner {\n background-color: #00838d;\n height: 100%;\n width: 16px;\n padding-right: 9px;\n border-radius: 0;\n transform: skew(6deg);\n margin-right: -36px;\n align-items: start;\n background-image: linear-gradient(-45deg, #8f479a 1%, #dc2a74 100%);\n}\n\n.card4 .go-arrow {\n transform: skew(-6deg);\n margin-left: -2px;\n margin-top: 9px;\n opacity: 0;\n}\n\n.card4:hover {\n border: 1px solid #cd3d73;\n}\n\n.card4 h3 {\n margin-top: 8px;\n}\n\n.card4:hover .go-corner {\n margin-right: -12px;\n}\n\n.card4:hover .go-arrow {\n opacity: 1;\n}"}

slippery-baboon-37

👁 实时预览

📝 源代码