index.css

@font-face {
    font-family: 'iconfont';
    src: url('./iconfont/iconfont.eot');
    src: url('./iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
        url('./iconfont/iconfont.woff2') format('woff2'),
        url('./iconfont/iconfont.woff') format('woff'),
        url('./iconfont/iconfont.ttf') format('truetype'),
        url('./iconfont/iconfont.svg#iconfont') format('svg');
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a{
      text-decoration: none;
      color: #000;
  }
.main {
    width: 1122px;  
    height: 507px;
    background: url(./img/天津.jpg) no-repeat ;
    background-size: 1176px 768px;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    border:1px solid rgba(112,112,112,1);
    opacity:0.49;
    border-radius:38px;
}
.nav {
    width:960px;
    height:45px;
    background:rgba(219,223,220,1);
    border:1px solid rgba(112,112,112,1);
    opacity:0.48;
    margin: 64px auto 0;
    border-radius:38px;
    position: relative;
}
.nav span{  
    font-size: 40px;
    display: block;   
}

.nav .home{
    position: absolute;
    left: 20px;
}
.nav .list{
    position: absolute;
    left: 77px;
}
.nav .search-box{
    /* background-color: yellow; */
    /* width: 200px; */
    height: 40px;
    position: absolute;
    right: 20px;
    font-size: 40px;
}

.search-box:hover > #searchInput {
    width: 200px;
    height: 45px;
    border:1px solid rgba(112,112,112,1);
    background:rgb(246, 248, 247);
    
    border-radius:50px;
}

.nav #searchInput{
    padding:0;
    border: none;
    /* border: 0;默认boder为1 */
    width: 0px;
    /* height: 45px; */
 
    transition: width 2s;
    
}
.nav #search-btn{
    font-size: 40px;
}