{"html":"

New Transaction

\n \n \n \n

","css":".container {\n background-color: #ffffff;\n display: flex;\n width: 460px;\n height: 120px;\n position: relative;\n border-radius: 6px;\n transition: 0.3s ease-in-out;\n}\n\n.container:hover {\n transform: scale(1.03);\n width: 220px;\n}\n\n.container:hover .left-side {\n width: 100%;\n}\n\n.left-side {\n background-color: #5de2a3;\n width: 130px;\n height: 120px;\n border-radius: 4px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: 0.3s;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.right-side {\n width: calc(100% - 130px);\n display: flex;\n align-items: center;\n overflow: hidden;\n cursor: pointer;\n justify-content: space-between;\n white-space: nowrap;\n transition: 0.3s;\n}\n\n.right-side:hover {\n background-color: #f9f7f9;\n}\n\n.arrow {\n width: 20px;\n height: 20px;\n margin-right: 20px;\n}\n\n.new {\n font-size: 23px;\n font-family: \"Lexend Deca\", sans-serif;\n margin-left: 20px;\n}\n\n.card {\n width: 70px;\n height: 46px;\n background-color: #c7ffbc;\n border-radius: 6px;\n position: absolute;\n display: flex;\n z-index: 10;\n flex-direction: column;\n align-items: center;\n -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);\n -moz-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);\n -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);\n}\n\n.card-line {\n width: 65px;\n height: 13px;\n background-color: #80ea69;\n border-radius: 2px;\n margin-top: 7px;\n}\n\n@media only screen and (max-width: 480px) {\n .container {\n transform: scale(0.7);\n }\n\n .container:hover {\n transform: scale(0.74);\n }\n\n .new {\n font-size: 18px;\n }\n}\n\n.buttons {\n width: 8px;\n height: 8px;\n background-color: #379e1f;\n box-shadow: 0 -10px 0 0 #26850e, 0 10px 0 0 #56be3e;\n border-radius: 50%;\n margin-top: 5px;\n transform: rotate(90deg);\n margin: 10px 0 0 -30px;\n}\n\n.container:hover .card {\n animation: slide-top 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;\n}\n\n.container:hover .post {\n animation: slide-post 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;\n}\n\n@keyframes slide-top {\n 0% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n\n 50% {\n -webkit-transform: translateY(-70px) rotate(90deg);\n transform: translateY(-70px) rotate(90deg);\n }\n\n 60% {\n -webkit-transform: translateY(-70px) rotate(90deg);\n transform: translateY(-70px) rotate(90deg);\n }\n\n 100% {\n -webkit-transform: translateY(-8px) rotate(90deg);\n transform: translateY(-8px) rotate(90deg);\n }\n}\n\n.post {\n width: 63px;\n height: 75px;\n background-color: #dddde0;\n position: absolute;\n z-index: 11;\n bottom: 10px;\n top: 120px;\n border-radius: 6px;\n overflow: hidden;\n}\n\n.post-line {\n width: 47px;\n height: 9px;\n background-color: #545354;\n position: absolute;\n border-radius: 0px 0px 3px 3px;\n right: 8px;\n top: 8px;\n}\n\n.post-line:before {\n content: \"\";\n position: absolute;\n width: 47px;\n height: 9px;\n background-color: #757375;\n top: -8px;\n}\n\n.screen {\n width: 47px;\n height: 23px;\n background-color: #ffffff;\n position: absolute;\n top: 22px;\n right: 8px;\n border-radius: 3px;\n}\n\n.numbers {\n width: 12px;\n height: 12px;\n background-color: #838183;\n box-shadow: 0 -18px 0 0 #838183, 0 18px 0 0 #838183;\n border-radius: 2px;\n position: absolute;\n transform: rotate(90deg);\n left: 25px;\n top: 52px;\n}\n\n.numbers-line2 {\n width: 12px;\n height: 12px;\n background-color: #aaa9ab;\n box-shadow: 0 -18px 0 0 #aaa9ab, 0 18px 0 0 #aaa9ab;\n border-radius: 2px;\n position: absolute;\n transform: rotate(90deg);\n left: 25px;\n top: 68px;\n}\n\n@keyframes slide-post {\n 50% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n\n 100% {\n -webkit-transform: translateY(-70px);\n transform: translateY(-70px);\n }\n}\n\n.dollar {\n position: absolute;\n font-size: 16px;\n font-family: \"Lexend Deca\", sans-serif;\n width: 100%;\n left: 0;\n top: 0;\n color: #4b953b;\n text-align: center;\n}\n\n.container:hover .dollar {\n animation: fade-in-fwd 0.3s 1s backwards;\n}\n\n@keyframes fade-in-fwd {\n 0% {\n opacity: 0;\n transform: translateY(-5px);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}"}

plastic-goose-38

👁 实时预览

📝 源代码

🔗 相关联的样式