TweenMax+svg实现文字点击伸缩展开搜索框代码-html代码-BFW代码库

TweenMax+svg实现文字点击伸缩展开搜索框代码

代码语言：html

所属分类：搜索

代码描述：TweenMax+svg实现文字点击伸缩展开搜索框代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
     background-color: #42AB40;
     overflow: hidden;
     text-align:center;
      display: flex;
      align-items: center;
      justify-content: center; 
    }
    
    body,
    html {
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
    }
    
    svg {
     width: 100%;
     height: 600px;
     visibility: hidden;
     overflow:visible;
     position:fixed;
     
    }
    
    input{
     position:fixed;
    
     border:none;
     outline:none;
     height:34px;
     line-height:normal;  
     font-size:25px;
     width:210px;
     font-family:'Quicksand', sans-serif;
     font-weight:700;
     color:#FBEFF9;
     background:transparent;
     text-align:left;
    }
    
    .disabled{
     pointer-events:none;
    }
    #searchGroup, .close, #search, .hit{
     -webkit-tap-highlight-color:transparent;
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <svg class="close-search" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
 <defs>
  
      <g id="searchGroup" fill="#FBEFF9">
        <g i.........完整代码请登录后点击上方下载按钮下载查看