html伸缩搜索,收缩搜索框.html

body {

background: #252525;

;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.container {

position: absolute;

margin: auto;

top: 0;

left: 0;

right: 0;

bottom: 0;

width: 300px;

height: 100px;

}

.container input{

font-family: 'Inconsolata', monospace;

position: absolute;

margin: auto;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 45px;

height: 45px;

outline: none;

border: none;

background: crimson;

color: white;

text-shadow: 0 0 10px crimson;

padding: 0 80px 0 20px;

border-radius: 30px;

box-shadow: 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2);

transition: all 1s;

opacity: 0;

z-index: 5;

font-weight: bolder;

letter-spacing: 0.1em;

}

.container input[type="text"]::placeholder{

color: #fe6481f7;

font-weight: bold;

font-family: arial;

}

.container input[type="checkbox"]{

cursor: pointer;

z-index: 99;

}

.container input[type="checkbox"]:checked+input[type="text"]{

width: 260px;

opacity: 1;

}

.container input[type="checkbox"]:checked~.search{

left: 200px;

background: black;

}

.container input[type="checkbox"]:checked~.search::after{

top: 0;

left: 0;

width: 25px;

height: 2px;

background: white;

border: none;

transform: rotate(135deg);

transition: all .5s;

}

.container input[type="checkbox"]:checked~.search::before{

top: 0;

left: 0;

width: 25px;

transition: all .5s;

}

.container input[type="checkbox"]:checked{

left: 200px;

}

.container .search {

position: absolute;

margin: auto;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 65px;

height: 65px;

background: crimson;

border-radius: 50%;

transition: all 1s;

z-index: 6;

box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);

cursor: pointer;

}

.container .search::before {

content: "";

position: absolute;

margin: auto;

top: 22px;

right: 0;

bottom: 0;

left: 22px;

width: 12px;

height: 2px;

background: white;

transform: rotate(45deg);

transition: all .5s;

}

.container .search::after {

content: "";

position: absolute;

margin: auto;

top: -5px;

right: 0;

bottom: 0;

left: -5px;

width: 22px;

height: 22px;

border-radius: 50%;

border: 2px solid white;

transition: all .5s;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史