css实现搜索按钮点击展开搜索框动画效果代码-html代码-BFW代码库

css实现搜索按钮点击展开搜索框动画效果代码

代码语言：html

所属分类：搜索

代码描述：css实现搜索按钮点击展开搜索框动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">

<style>
    html,body {height: 100%;}
body {padding: 0px; margin:0px; background:url(//repo.bfw.wiki/bfwrepo/image/5eec59613702c.png) ; background-position: center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat;}

.search-wrapper {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top:50%;
    left:50%;
}
.search-wrapper.active {}

.search-wrapper .input-holder {
    overflow: hidden;
    height: 70px;
    background: rgba(255,255,255,0);
    border-radius:6px;
    position: relative;
    width:70px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
    border-radius: 50px;
    width:450px;
    background: rgba(0,0,0,0.5);
    -webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}

.search-wrapper .input-holder .search-input {
    width:100%;
  .........完整代码请登录后点击上方下载按钮下载查看