<div class="main">
  <svg class="magnifier"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 34">
    <title>magnifier</title>
    <circle class="cls-1" cx="12.1" cy="12.1" r="11.6"/>
    <line class="cls-1" x1="20.5" y1="20" x2="33.1" y2="32.6"/>
  </svg>
  <input id="textinput" type="text">
  <svg class="x-out" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.3 29.3">
    <title>x-out</title>
    <line x1="0.5" y1="0.5" x2="28.8" y2="28.8"/>
    <line x1="0.5" y1="28.8" x2="28.8" y2="0.5"/>
  </svg>
</div>

$quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$quad-out: cubic-bezier(0.55, 0.085, 0.68, 0.53);

body {
  background: linear-gradient(135deg, #ad1283 0%, #8f45d8 100%);
  width: 100vw;
  height: 100vh;
  margin: 0;
  color: #E8AFE1;
  font-family: "lato", sans-serif;
}

// 变成绝对定位，调整在屏幕中显示的位置
.magnifier, input, .x-out {
  margin-left: 30vw;
  margin-top: 40vh;
  position: absolute;
}

.magnifier circle, .magnifier line, .x-out line {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  transition: 0.25s all ease;
}

// 设置x的颜色，默认全透明，不显示
.x-out {
  width: 6px;
  padding: 5px 5px;
  transition: 0.5s all ease;
  cursor: pointer;
  line {
    stroke-width: 2px;
    opacity: 0;
    transform: scale(0);
    transform-origin: 50% 50%;
  }
}

// 把放大镜和输入框调成一样大
.magnifier, input {
  width: 400px;
}

input {
  font-size: 35px;
  padding-left: 30px;
  background: none;
  cursor: pointer;
  box-shadow: none;
  border: none;
  outline: none;
}

// open 后的动画设置
.open .magnifier {
  line {
    transition: 2s x2 $quad;
    transform: rotate(-2.6deg) translateY(14px);
  }
  circle {
    transition: 0.35s all $quad;
    transform: scale(0.5);
  }
}

.open .x-out line {
  opacity: 1;
  transform: scale(1);
  transition: 0.75 all $quad;
}

$(document).ready(() => {
  $('.main').on('click', () => {
    const magLine = $('.magnifier line');
    const mainInput = $('input');
    
    if ($('.main').hasClass('open')) {
      $('.main').removeClass('open');
      magLine.attr('x2', 33.1);
      mainInput.blur();
      mainInput.val('');
    } else {
      $('.main').addClass('open');
      magLine.attr('x2', 300);
      mainInput.focus();
    }
  });
});