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 id="se">
       <rect id="hit" width="545" height="60" y="6" fill="transparent"/>
          <path d="M.49,54.88a2.19,2.19,0,0,1,3.12-.28c3.12,2.3,8.07,5.23,13.76,5.23a13.58,13.58,0,0,0,8.54-2.75,6.82,6.82,0,0,0,3.39-5.51c-.09-2.11-.91-3.58-3.21-5.5C24.17,44.6,21,43.5,16.55,42.76l-.18-.09c-4-.73-7.62-1.65-10.19-3.49a9.36,9.36,0,0,1-4.86-8.07A11.13,11.13,0,0,1,6.18,22.3a19.29,19.29,0,0,1,11-3c5.78,0,9.91,2.66,13.4,4.86a2.34,2.34,0,0,1,.64,3.12,2.21,2.21,0,0,1-3,.65c-3.3-2.21-6.6-4.5-11-4.5A13.48,13.48,0,0,0,8.66,26a6.74,6.74,0,0,0-2.85,5.14c0,1.83.83,3.12,2.57,4.5a22.86,22.86,0,0,0,9.18,3.12h.18A31,31,0,0,1,28.66,42.4a11.2,11.2,0,0,1,5.05,9.17c0,3.76-2.11,6.79-5.14,9.09a18.37,18.37,0,0,1-11.2,3.58c-7.24-.1-12.93-3.49-16.61-6.43A2.07,2.07,0,0,1,.49,54.88Z"/>
          <path d="M45.54,41.85c0-12.48,9.73-22.58,21.84-22.58C79,19.27,88.12,28.45,89,40.19v.37a2.08,2.08,0,0,1-2.2,2H50c.46,9.82,8.17,17.25,17.43,17.25a16.91,16.91,0,0,0.........完整代码请登录后点击上方下载按钮下载查看