{"html":"

\n\t

\n\t\t\n\t\tSearch\n\t\t

\n\t\t\t\n\t\t

\n\t\t

\n\t\t\t\n\t\t

\n\t

","css":".search-panels {\n --default-color: #9e9e9e;\n --color-text: #ccc;\n --color-active: #1a73e8;\n --color-active-input: #f5f5f5;\n --transition: 150ms cubic-bezier(0.4,0,0.2,1);\n --width-input: 200px;\n}\n\n.search-group {\n position: relative;\n}\n\n.input {\n width: var(--width-input);\n border: solid 1.5px var(--default-color);\n border-radius: 80px;\n background: none;\n padding: 1rem;\n padding-right: 3rem;\n font-size: 1rem;\n color: var(--color-active-input);\n transition: border var(--transition);\n}\n\n.enter-label {\n position: absolute;\n left: 15px;\n color: var(--default-color);\n pointer-events: none;\n transform: translateY(1rem);\n transition: var(--transition);\n}\n\n.enter-label {\n color: var(--default-color);\n pointer-events: none;\n}\n\n.input:focus, input:valid {\n outline: none;\n border: 1.5px solid var(--color-active);\n}\n\n.input:focus ~ label, input:valid ~ label {\n transform: translateY(-50%) scale(0.8);\n background-color: var(--color-active);\n border-radius: 20px;\n padding: .2em .6em;\n color: var(--color-text);\n}\n\n.btn-box {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: -1em;\n right: 80%;\n border-radius: 100%;\n transition: 300ms cubic-bezier(0.4,0,0.2,1);\n transition-delay: 100ms;\n opacity: 0;\n}\n\n.input:focus ~ .btn-box, input:valid ~ .btn-box {\n right: 10%;\n opacity: 1;\n transition-delay: 0s;\n transition: var(--transition);\n}\n\n.input:not(:focus) ~ .btn-box, input:not(:valid) ~ .btn-box {\n transition-property: right, opacity;\n transition-delay: 300ms;\n}\n\n.input:focus ~ .btn-box:hover, input:valid ~ .btn-box:hover {\n transform: scale(1.2);\n}\n\n.input:focus ~ .btn-box:hover:active, input:valid ~ .btn-box:hover:active {\n transform: scale(1);\n}\n\n.btn-search {\n position: relative;\n cursor: pointer;\n background-color: var(--color-active);\n width: 2em;\n height: 2em;\n top: 2.5px;\n border: none;\n border-radius: 100%;\n padding: 0;\n transition: var(--transition);\n}\n\n.btn-search:active {\n transform: scale(1);\n}\n\n.btn-search svg {\n position: absolute;\n top: 25%;\n left: 25%;\n fill: var(--color-text);\n width: 12px;\n height: 12px;\n}\n\n#svg-circle {\n fill: var(--color-text);\n transition: var(--transition);\n}\n\n.input:focus ~ .btn-box:hover #svg-circle, input:valid ~ .btn-box:hover #svg-circle {\n fill: transparent;\n}\n\n.btn-box-x {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 1em;\n right: 7%;\n opacity: 0;\n transform: rotate(-90deg) scale(.1);\n transition: var(--transition);\n}\n\n.input:focus ~ .btn-box-x, input:valid ~ .btn-box-x {\n opacity: 1;\n transform: rotate(0) scale(1);\n}\n\n.btn-cleare {\n position: relative;\n cursor: pointer;\n background-color: transparent;\n width: 2em;\n height: 2em;\n border: none;\n border-radius: 100%;\n padding: 0;\n transition: var(--transition);\n}\n\n.btn-cleare svg {\n width: 15px;\n height: 15px;\n}\n\n#cleare-line {\n fill: var(--default-color);\n}\n\n.btn-box-x:hover #cleare-line {\n fill: var(--color-active);\n}"}

stupid-jellyfish-61

👁 实时预览

📝 源代码