返回

CSS实验:搜索框

前端学习就要多实践,这个周末在改自己博客,准备自己做个主题,关于搜索框我看中文教程不多,找到了一篇不错的英文教程,在这个基础上对代码和描述都有改动。原文在此

一、 Background Fade

首先完成最基础的搜索框的html骨架

<div class="box">
  <div class="container-1">
      &lt;span class="icon"><i class="fa fa-search"></i></span>
      &lt;input type="search" id="search" placeholder="Search..." />
  &lt;/div>
&lt;/div>

可以看出我们把搜索框分为四个部分,最外层的container-1用来确定搜索框在整个页面的位置和搜索框的大小,icon和search实现搜索框内部样式。

第一步为container-1添加样式,由于只是演示搜索框,所以我们只简单加上宽高就可以了。

.container-1{
    margin: 100px auto;
    width: 300px;
    height: 50px;
}

第二步我们为input添加基本样式

.container-1 input{
    width: 300px;
    height: 50px;
    background: #2b303b;
    border: none;
    color: #63717f;
    padding-left: 45px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
   }

第三步为icon添加样式 其中line-height: 50px;为了使图标居中(这个属性设置的居中岁字体大小变化是有一点偏差的,居中只是一般我们看不出偏差)

.container-1 .icon{
    box-sizing: border-box;
    position: absolute;
    line-height: 50px;
    margin-left: 15px;
    color: #4f5b66;
}

到现在整个搜索框已经基本完成了,只是看起来还是还不是很炫,接下来我们再加点特效~

第四步通过伪元素:hover:focus实现鼠标经过和获得焦点是背景变化

.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
    outline:none;
    background: #ffffff;
}

第五步之前的变化瞬间完成比较生硬,最后在加上过渡效果。 在input元素上加入

-webkit-transition: background .55s ease;
-moz-transition: background .55s ease;
-ms-transition: background .55s ease;
-o-transition: background .55s ease;
transition: background .55s ease;

注意,需要要在发生变化的元素上添加,而不是在:hover:focus,可以这样理解:hover:focus存放的是结果,他告诉transtion 我要变成什么样负责触发过渡,而transtion则负责控制过渡的细节,比如时间和速度。

如果我们把上面第五步中的background其他属性那又是一种特效,比如我们想让鼠标悬停时搜索框自动伸长,那就换成width,当然:hover和原始宽度也要发生相应改变。

.container-1 input#search:focus, .container-1 input#search:active,.container-1:hover input#search{
    width: 300px;
}
.container-1:hover .icon{
    color: #93a2ad;
}

最后把input的宽度改成50px,看下效果是不是更炫了~

药不能停,继续加特效。

既然我们的图标是个放大镜,哪我们给这个图标再加个放大效果,用户体验会更好。 我们给.icon加入过渡控制:

-webkit-transition: all .55s ease; -moz-transition: all .55s ease; -ms-transition: all .55s ease; -o-transition: all .55s ease; transition: all .55s ease;

再给.container-1:hover .icon加入过渡后的结果:

-webkit-transform:scale(1.5); /* Safari and Chrome */
    -moz-transform:scale(1.5); /* Firefox */
    -ms-transform:scale(1.5); /* IE 9 */
    -o-transform:scale(1.5); /* Opera */
    transform:scale(1.5);

看看效果吧

Licensed under CC BY-NC-SA 4.0
❤️
Built with Hugo
Theme Stack designed by Jimmy