{"html":"

\n","css":".letter-image {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 200px;\n height: 200px;\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n cursor: pointer;\n}\n\n.animated-mail {\n position: absolute;\n height: 150px;\n width: 200px;\n -webkit-transition: 0.4s;\n -moz-transition: 0.4s;\n transition: 0.4s;\n\n .body {\n position: absolute;\n bottom: 0;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0 0 100px 200px;\n border-color: transparent transparent #e95f55 transparent;\n z-index: 2;\n }\n\n .top-fold {\n position: absolute;\n top: 50px;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 50px 100px 0 100px;\n -webkit-transform-origin: 50% 0%;\n -webkit-transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;\n -moz-transform-origin: 50% 0%;\n -moz-transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;\n transform-origin: 50% 0%;\n transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;\n border-color: #cf4a43 transparent transparent transparent;\n z-index: 2;\n }\n\n .back-fold {\n position: absolute;\n bottom: 0;\n width: 200px;\n height: 100px;\n background: #cf4a43;\n z-index: 0;\n }\n\n .left-fold {\n position: absolute;\n bottom: 0;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 50px 0 50px 100px;\n border-color: transparent transparent transparent #e15349;\n z-index: 2;\n }\n\n .letter {\n left: 20px;\n bottom: 0px;\n position: absolute;\n width: 160px;\n height: 60px;\n background: white;\n z-index: 1;\n overflow: hidden;\n -webkit-transition: 0.4s 0.2s;\n -moz-transition: 0.4s 0.2s;\n transition: 0.4s 0.2s;\n\n .letter-border {\n height: 10px;\n width: 100%;\n background: repeating-linear-gradient(\n -45deg,\n #cb5a5e,\n #cb5a5e 8px,\n transparent 8px,\n transparent 18px\n );\n }\n\n .letter-title {\n margin-top: 10px;\n margin-left: 5px;\n height: 10px;\n width: 40%;\n background: #cb5a5e;\n }\n .letter-context {\n margin-top: 10px;\n margin-left: 5px;\n height: 10px;\n width: 20%;\n background: #cb5a5e;\n }\n\n .letter-stamp {\n margin-top: 30px;\n margin-left: 120px;\n border-radius: 100%;\n height: 30px;\n width: 30px;\n background: #cb5a5e;\n opacity: 0.3;\n }\n }\n}\n\n.shadow {\n position: absolute;\n top: 200px;\n left: 50%;\n width: 400px;\n height: 30px;\n transition: 0.4s;\n transform: translateX(-50%);\n -webkit-transition: 0.4s;\n -webkit-transform: translateX(-50%);\n -moz-transition: 0.4s;\n -moz-transform: translateX(-50%);\n\n border-radius: 100%;\n background: radial-gradient(\n rgba(0, 0, 0, 0.5),\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0)\n );\n}\n\n.letter-image:hover {\n .animated-mail {\n transform: translateY(50px);\n -webkit-transform: translateY(50px);\n -moz-transform: translateY(50px);\n }\n\n .animated-mail .top-fold {\n transition: transform 0.4s, z-index 0.2s;\n transform: rotateX(180deg);\n -webkit-transition: transform 0.4s, z-index 0.2s;\n -webkit-transform: rotateX(180deg);\n -moz-transition: transform 0.4s, z-index 0.2s;\n -moz-transform: rotateX(180deg);\n z-index: 0;\n }\n\n .animated-mail .letter {\n height: 180px;\n }\n\n .shadow {\n width: 250px;\n }\n}\n"}

grumpy-swan-28

👁 实时预览

📝 源代码