输入转换
Input transition
我尝试为我的搜索按钮制作动画。
当你点击它时,它应该展开并滑到一边。
动画在css没有问题,但是搜索栏前面是一个div,不跟在展开的搜索栏后面。
<form>
<div class="test"></div>
<input type="search" placeholder="Search">
</form>
form{
float:right;
}
input[type=search] {
background: #E75757 url(http://nerdlove.de/Blog/img/search_icon.svg) no-repeat 15px center;
background-size: 25px;
border: none;
padding: 10px 10px 10px 10px;
width: 35px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
text-indent:-999px;
}
input[type=search]:focus {
width: 150px;
background-position: -30px;
text-indent: 0px;
}
.test{
float:left;
}
.test:before{
content: no-close-quote;
border-top: 40px solid rgba(0, 0, 0, 0);
border-left: 0px solid rgba(0, 0, 0, 0);
border-right: 18px solid #E75757;
float: right;
right: 55px;
position: absolute;
}
我会将 :before 添加到输入中。但是在css.
中是不可能的
只需将 .test
元素定位为 relative
,将 :before
定位为 right: 0;
。
.test{
float:left;
position: relative;
}
.test:before{
content: no-close-quote;
border-top: 40px solid rgba(0, 0, 0, 0);
border-left: 0px solid rgba(0, 0, 0, 0);
border-right: 18px solid #E75757;
float: right;
right: 0;
position: absolute;
}
我尝试为我的搜索按钮制作动画。
当你点击它时,它应该展开并滑到一边。
动画在css没有问题,但是搜索栏前面是一个div,不跟在展开的搜索栏后面。
<form>
<div class="test"></div>
<input type="search" placeholder="Search">
</form>
form{
float:right;
}
input[type=search] {
background: #E75757 url(http://nerdlove.de/Blog/img/search_icon.svg) no-repeat 15px center;
background-size: 25px;
border: none;
padding: 10px 10px 10px 10px;
width: 35px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
text-indent:-999px;
}
input[type=search]:focus {
width: 150px;
background-position: -30px;
text-indent: 0px;
}
.test{
float:left;
}
.test:before{
content: no-close-quote;
border-top: 40px solid rgba(0, 0, 0, 0);
border-left: 0px solid rgba(0, 0, 0, 0);
border-right: 18px solid #E75757;
float: right;
right: 55px;
position: absolute;
}
我会将 :before 添加到输入中。但是在css.
中是不可能的只需将 .test
元素定位为 relative
,将 :before
定位为 right: 0;
。
.test{
float:left;
position: relative;
}
.test:before{
content: no-close-quote;
border-top: 40px solid rgba(0, 0, 0, 0);
border-left: 0px solid rgba(0, 0, 0, 0);
border-right: 18px solid #E75757;
float: right;
right: 0;
position: absolute;
}