{"html":"

TITLE

\n \n \n \n

","css":".card {\n position: relative;\n height: 300px;\n width: 230px;\n}\n\n.card .boxshadow {\n position: absolute;\n height: 100%;\n width: 100%;\n border: 1px solid red;\n transform: scale(0.8);\n box-shadow: rgb(255, 0, 0) 0px 30px 70px 0px;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n.card .main {\n width: 100%;\n height: 100%;\n overflow: hidden;\n background: red;\n background: linear-gradient(0deg, rgb(62, 0, 0) 0%, rgb(255, 0, 0) 60%, rgb(62, 0, 0) 100%);\n position: relative;\n -webkit-clip-path: polygon(0 40px, 40px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px));\n clip-path: polygon(0 40px, 40px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px));\n -webkit-clip-path: polygon(0 0, 100% 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px));\n clip-path: polygon(0 0, 100% 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px));\n box-shadow: rgb(255, 0, 0) 0px 7px 29px 0px;\n transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n.card .main .top {\n position: absolute;\n top: 0px;\n left: 0;\n width: 0px;\n height: 0px;\n z-index: 2;\n border-top: 115px solid black;\n border-left: 115px solid transparent;\n border-right: 115px solid transparent;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n.card .main .side {\n position: absolute;\n width: 100%;\n top: 0;\n transform: translateX(-50%);\n height: 101%;\n background: black;\n -webkit-clip-path: polygon(0% 0%, 50% 0, 95% 45%, 100% 100%, 0% 100%);\n clip-path: polygon(0% 0%, 50% 0, 95% 45%, 100% 100%, 0% 100%);\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s;\n}\n\n.card .main .left {\n left: 0;\n}\n\n.card .main .right {\n right: 0;\n transform: translateX(50%) scale(-1, 1);\n}\n\n.card .main .title {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 90px;\n font-weight: bold;\n font-size: 25px;\n opacity: 0;\n z-index: -1;\n transition: all 0.2s ease-out 0s;\n}\n\n.card .main .button-container {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.card .main .button-container .button {\n position: absolute;\n transform: translateX(-50%);\n padding: 5px 10px;\n -webkit-clip-path: polygon(0 0, 100% 0, 81% 100%, 21% 100%);\n clip-path: polygon(0 0, 100% 0, 81% 100%, 21% 100%);\n background: black;\n border: none;\n color: white;\n display: grid;\n place-content: center;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n.card .main .button-container .button .svg {\n width: 15px;\n transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n.card .main .button-container .button:nth-child(1) {\n bottom: 300px;\n transition-delay: 0.4s;\n}\n\n.card .main .button-container .button:nth-child(2) {\n bottom: 300px;\n transition-delay: 0.6s;\n}\n\n.card .main .button-container .button:nth-child(3) {\n bottom: 300px;\n transition-delay: 0.8s;\n}\n\n.card .main .button-container .button:hover .svg {\n transform: scale(1.2);\n}\n\n.card .main .button-container .button:active .svg {\n transform: scale(0.7);\n}\n\n.card:hover .main {\n transform: scale(1.1);\n}\n\n.card:hover .main .top {\n top: -50px;\n}\n\n.card:hover .main .left {\n left: -50px;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;\n}\n\n.card:hover .main .right {\n right: -50px;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.1s;\n}\n\n.card:hover .main .title {\n opacity: 1;\n transition: all 0.2s ease-out 1.3s;\n}\n\n.card:hover .main .button-container .button:nth-child(1) {\n bottom: 80px;\n transition-delay: 0.8s;\n}\n\n.card:hover .main .button-container .button:nth-child(2) {\n bottom: 40px;\n transition-delay: 0.6s;\n}\n\n.card:hover .main .button-container .button:nth-child(3) {\n bottom: 0;\n transition-delay: 0.4s;\n}"}

curly-goose-86

👁 实时预览

📝 源代码