css实现一个搜索按钮点击弹出搜索框动画效果代码-html代码-BFW代码库

css实现一个搜索按钮点击弹出搜索框动画效果代码

代码语言：html

所属分类：搜索

代码描述：使用css实现一个搜索按钮点击后弹出一个完整的搜索框动画效果代码

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

<html>

<head>
    <style>
        body {
          background-color: #ff9800;
          color: #fff;
          margin: 0;
        }
        
        #content {
          position: absolute;
          height: 50px;
          width: 300px;
          margin-left: 170px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        
        #content.on {
          -webkit-animation-name: in-out;
          animation-name: in-out;
          -webkit-animation-duration: 0.7s;
          animation-duration: 0.7s;
          -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
          -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
        }
        
        input {
          box-sizing: border-box;
          width: 50px;
          height: 50px;
          border: 4px solid #ffffff;
          border-radius: 50%;
          background: none;
          color: #fff;
          font-size: 16px;
          font-weight: 400;
          font-family: Roboto;
          outline: 0;
          -webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
            padding 0.2s;
          transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out,
            padding 0.2s;
          -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
          -webkit-transform: translate(-100%, -50%);
          -ms-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
        }
        
        .search {
          background: none;
          position: absolute;
          top: 0px;
          left: 0;
          height: 50px;
          width: 50px;
          padding: 0;
          border-radius: 100%;
          outline: 0;
          border: 0;
          color: inherit;
          cursor: pointer;
          -webkit-transition: 0.2s ease-in-out;
          transition: 0.2s ease-in-out;
          -webkit-transform: translate(-100%, -50%);
          -ms-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
        }
        
        .search:before {
          content: "";
          position: absolute;
          width: 20px;
          height: 4px;
          background-color: #fff;
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
          margin-top: 26px;
          margin-left: 17px;
          -webkit-transition: 0.2s ease-in-out;
          transition: 0.2s ease-in-out;
        }
        
        .close {
          -webkit-trans.........完整代码请登录后点击上方下载按钮下载查看