html - 动画 CSS 伪类

Question

我正在尝试创建一个搜索图标，该图标在悬停时会转换为输入。我使用伪类 ::after 作为放大镜的 handle 。本质上，我希望当鼠标悬停在图标上时， handle 能够顺利消失。这是我的 codepen 的链接.

body {
  text-align: center;
}
#magnifying-glass {
  display: flex;
  justify-content: center;
  height: 100px;
  width: 100px;
  border-radius: 100px;
  border: 14px solid red;
  margin: 0 auto;
  margin-top: 200px;
  transition: 1s;
}
#magnifying-glass::after {
  content: "";
  height: 50px;
  width: 14px;
  background-color: red;
  transform: rotate(-45deg);
  position: relative;
  top: 85px;
  left: 50px;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}
input {
  display: none;
  border: none;
  width: 70%;
  font-size: 2.5em;
  border-radius: 40px;
}
input:focus {
  outline: none;
}
#magnifying-glass:hover {
  width: 300px;
}
#magnifying-glass:hover #magnifying-glass::after {
  width: 0px;
}
#magnifying-glass:hover input {
  display: block;
}

<div id="magnifying-glass">
    <input type="text" placeholder="Search">
</div>

非常感谢!

Answer 1

如果您希望它平滑消失而不是那么尖锐，请将下面的过渡时间更改为以下值。

#magnifying-glass::after {
  content: "";
  height: 50px;
  width: 14px;
  border-radius: 10px;
  background-color: red;
  transform: rotate(-45deg);
  position: absolute;
  top: 88px;
  left: 100px;
  -webkit-transition: 2.5s;
  -moz-transition: 2.5s;
  -o-transition: 2.5s;
  transition: 2.5s;
}

为了让它更流畅，你可以添加:

#magnifying-glass:hover::after {
   transform: rotate(360deg);
   height: 0;
   opacity: 0;
}

这是一个包含这些更改的代码笔。 https://codepen.io/Ballard/pen/EgYLKG