{"html":"\n\n

\n \n

\n\n","css":"#check {\n display: none;\n}\n\n#upload {\n display: block;\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n margin: 0 auto;\n width: 120px;\n height: 42px;\n transform: translateY(-50%);\n transition: 0.3s ease width;\n cursor: pointer;\n}\n\n#app {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background-color: #fff;\n border: 2px solid #143240;\n overflow: hidden;\n z-index: 2;\n}\n\n#app::before {\n content: \"upload\";\n position: absolute;\n top: 0;\n right: 0;\n padding: 12px;\n left: 0;\n color: #143240;\n font-size: 14px;\n line-height: 14px;\n font-weight: bold;\n z-index: 1;\n}\n\n#arrow {\n position: absolute;\n top: 0;\n right: 0;\n width: 38px;\n height: 38px;\n background-color: #fff;\n z-index: 2;\n}\n\n#arrow::before,\n#arrow::after {\n content: \"\";\n position: absolute;\n top: 18px;\n width: 10px;\n height: 2px;\n background-color: #143240;\n}\n\n#arrow::before {\n right: 17px;\n transform: rotateZ(-45deg);\n}\n\n#arrow::after {\n right: 11px;\n transform: rotateZ(45deg);\n}\n\n#success {\n position: absolute;\n top: 0;\n right: 0;\n width: 54px;\n height: 54px;\n margin: -8px;\n background-color: #143240;\n transform: scale(0);\n border-radius: 50%;\n z-index: 3;\n}\n\n#success svg {\n font-size: 20px;\n fill: #fff;\n display: block;\n width: 20px;\n height: 20px;\n margin: 17px auto;\n transform: scale(1);\n}\n\n#check:checked + #upload {\n width: 42px;\n}\n\n#check:checked + #upload #arrow::before {\n animation:\n _a 0.4s ease 0.4s forwards,\n _incHeight 4s ease 1s forwards;\n}\n\n#check:checked + #upload #arrow::after {\n animation:\n _b 0.4s ease 0.4s forwards,\n _incHeight 4s ease 1s forwards;\n}\n\n#check:checked + #upload #success {\n animation: _success 0.4s cubic-bezier(0, 0.74, 0.32, 1.21) 5s forwards;\n}\n\n#check:checked + #upload #success {\n animation: _success 0.3s cubic-bezier(0, 0.74, 0.32, 1.21) 5.2s forwards;\n}\n\n@keyframes _a {\n 0% {\n top: 18px;\n right: 17px;\n width: 10px;\n transform: rotateZ(-45deg);\n background-color: #143240;\n }\n\n 100% {\n top: 36px;\n right: 19px;\n width: 19px;\n transform: rotateZ(0deg);\n background-color: #ffc107;\n }\n}\n\n@keyframes _b {\n 0% {\n top: 18px;\n right: 11px;\n width: 10px;\n transform: rotateZ(45deg);\n background-color: #143240;\n }\n\n 100% {\n top: 36px;\n right: 0;\n width: 19px;\n transform: rotateZ(0deg);\n background-color: #ffc107;\n }\n}\n\n@keyframes _incHeight {\n 0% {\n top: 36px;\n height: 2px;\n }\n\n 25% {\n top: 31px;\n height: 8px;\n }\n\n 50% {\n top: 21px;\n height: 18px;\n }\n\n 80% {\n top: 11px;\n height: 28px;\n }\n\n 100% {\n top: 0;\n height: 39px;\n }\n}\n\n@keyframes _success {\n 0% {\n transform: scale(0);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n"}

gentle-horse-36

👁 实时预览

📝 源代码