{"html":"

\n \n \n \n \n \n \n \n \n\n \n

\n card\n number\n \n \n \n
\n \n

\n \n Thomas.F\n

\n","css":".logo svg {\n height: 48px;\n width: 54px;\n}\n\n::selection {\n background-color: rgba(0, 0, 0, 0);\n}\n\n.container {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n\n.card {\n background: radial-gradient(circle, white 0%, #d5d5d5 100%);\n width: 300px;\n height: 200px;\n border-radius: 20px;\n position: relative;\n box-shadow: 3px 3px 17px 0px rgba(0, 0, 0, 0.55);\n}\n\n.card .remove,\n.card .logo {\n position: absolute;\n display: inline-block;\n cursor: pointer;\n}\n\n.card .remove {\n top: 30px;\n right: 30px;\n opacity: 0.9;\n color: black;\n}\n\n.card .remove:hover {\n color: #f06b5d;\n}\n\n.card .logo {\n top: 20px;\n left: 30px;\n font-size: 3em;\n opacity: 1;\n}\n\n.card .number,\n.card .owner {\n display: block;\n position: absolute;\n left: 30px;\n cursor: default;\n color: black;\n opacity: 0.9;\n transition: color 0.7s ease-out;\n}\n\n.card .number {\n bottom: 60px;\n letter-spacing: 4px;\n}\n\n.card .owner {\n bottom: 30px;\n letter-spacing: 1px;\n}\n.wave-group {\n position: relative;\n}\n\n.wave-group .input {\n font-size: 16px;\n padding: 10px 10px 10px 5px;\n display: block;\n width: 200px;\n border: none;\n border-bottom: 1px solid #515151;\n background: transparent;\n}\n\n.wave-group .input:focus {\n outline: none;\n}\n\n.wave-group .label {\n color: #999;\n font-size: 18px;\n font-weight: normal;\n position: absolute;\n pointer-events: none;\n left: 5px;\n top: 10px;\n display: flex;\n}\n\n.wave-group .label-char {\n transition: 0.2s ease all;\n transition-delay: calc(var(--index) * 0.05s);\n}\n\n.wave-group .input:focus ~ label .label-char,\n.wave-group .input:valid ~ label .label-char {\n transform: translateY(-20px);\n font-size: 14px;\n color: #6e7fc1;\n}\n\n.wave-group .bar {\n position: relative;\n display: block;\n width: 200px;\n}\n\n.wave-group .bar:before,\n.wave-group .bar:after {\n content: \"\";\n height: 2px;\n width: 0;\n bottom: 1px;\n position: absolute;\n background: #0727a6;\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n}\n\n.wave-group .bar:before {\n left: 50%;\n}\n\n.wave-group .bar:after {\n right: 50%;\n}\n\n.wave-group .input:focus ~ .bar:before,\n.wave-group .input:focus ~ .bar:after {\n width: 50%;\n}\n"}

fast-puma-64

👁 实时预览

📝 源代码