{"html":"

\n \n

Photos

\n \n

","css":".card {\n position: relative;\n background: #a68b8a;\n width: 190px;\n height: 265px;\n cursor: pointer;\n transition: all .3 ease;\n overflow: visible;\n box-shadow: 0px 1px 5px rgba(0, 0, 0, .3);\n}\n\n.product {\n content: \"\";\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 150px;\n height: 150px;\n background-color: #faf3e8;\n z-index: 1;\n}\n\n.product p {\n font-size: 17px;\n text-align: center;\n color: #181818;\n line-height: 150px;\n}\n\n.shine {\n position: relative;\n top: 0;\n left: 0;\n width: 190px;\n height: 265px;\n overflow: hidden;\n}\n\n.shine-effect {\n position: absolute;\n top: -15%;\n left: 150%;\n width: 25px;\n height: 400px;\n background-color: #ffffff2a;\n box-shadow: 0 0 15px 2px #ffffff42;\n transform: rotate(25deg);\n transition: all 1s cubic-bezier(0.78, 0.02, 0.5, 0.77);\n z-index: 5;\n}\n\n.pattern-1 {\n position: absolute;\n top: 0;\n left: 0;\n width: 125px;\n height: auto;\n z-index: 2;\n}\n\n.pattern-2 {\n position: absolute;\n top: -10%;\n left: -10%;\n width: 200px;\n height: auto;\n z-index: 2;\n}\n\n.tree {\n position: absolute;\n bottom: 1%;\n right: -2%;\n width: 100px;\n height: auto;\n transform-origin: 100% 0;\n transform: rotate(-15deg);\n z-index: 3;\n}\n\n.tape-1 {\n position: absolute;\n top: -20%;\n left: 2%;\n width: 35px;\n height: auto;\n filter: drop-shadow(1px 3px 3px #18181870);\n z-index: 6;\n}\n\n.tape-2 {\n position: absolute;\n top: -25%;\n right: 2%;\n width: 35px;\n height: auto;\n filter: drop-shadow(1px 3px 3px #18181870);\n z-index: 6;\n}\n\n.card:hover {\n transform: scale(1.02);\n}\n\n.card:hover .tape-1 {\n transform: scale(1);\n}\n\n.card:hover .tape-2 {\n transform: scale(1);\n}\n\n.card:hover .shine-effect {\n left: -100%;\n}\n\n.card:active {\n transform: scale(1.02) translate(0, 5%);\n}\n\n.card:active .tape-1 {\n transform-origin: 0 100%;\n transform: scaleY(1.1);\n}\n\n.card:active .tape-2 {\n transform-origin: 0 100%;\n transform: scaleY(1.1);\n}\n\n.fil-tape-10 {\n fill: #A99473\n}\n\n.fil-tape-11 {\n fill: #BBAA88;\n fill-rule: nonzero\n}\n\n.fil-tape-20 {\n fill: #A99473\n}\n\n.fil-tape-21 {\n fill: #BBAA88;\n fill-rule: nonzero\n}\n\n.fil-pattern-1 {\n fill: #f3dfde\n}\n\n.fil-pattern-2 {\n fill: #333333;\n fill-rule: nonzero\n}\n\n.fil0 {\n fill: #333333\n}"}

proud-vampirebat-28

👁 实时预览

📝 源代码