html 搜索页面模板,SVG+HTML5 搜索界面模板

CSS

语言：

CSSSCSS

确定

body {

color: #b3c33a;

background-color: #333;

}

.search {

position: absolute;

top: 50%;

left: 50%;

margin-left: -300px;

margin-top: -54px;

width: 600px;

}

svg {

position: absolute;

transform: translateX(-246px);

width: 600px;

height: auto;

stroke-width: 8px;

stroke: #b3c33a;

stroke-width: 1px;

stroke-dashoffset: 0;

stroke-dasharray: 64.6 206.305;

transition: all 0.5s ease-in-out;

}

.input-search {

position: absolute;

width: calc(100% - 148px);

height: 64px;

top: 0;

right: 20px;

bottom: 0;

left: 0;

border: none;

background-color: transparent;

outline: none;

padding: 20px;

font-size: 50px;

}

.search-label {

position: absolute;

display: block;

width: 108px;

height: 108px;

top: 0;

left: 50%;

margin-left: -54px;

z-index: 100;

transition: 0.5s ease-in-out;

}

.isActive .search-label {

transform: translateX(246px);

}

.isActive svg {

stroke-dashoffset: -65;

stroke-dasharray: 141.305 65;

transform: translateX(0);

}

.isActive.full svg {

stroke-dashoffset: -65;

stroke-dasharray: 141.305 65;

transform: translateX(0);

}

.full .search-label {

transform: translateX(246px);

}

.full svg {

stroke-dashoffset: 0;

stroke-dasharray: 64.6 206.305;

transform: translateX(0);

}