动画CSS伪类

Question

我正在尝试创建一个搜索图标，在悬停时转换为输入。我使用伪类::after作为放大镜的句柄。基本上，我想让图标悬停时手柄平滑消失。这是我codepen的链接。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

非常感谢！

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

Answer 2

将opacity: 0添加到悬停状态

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

DEMO：https://jsfiddle.net/2691pjod/3/

片段

body {
  text-align: center;
  background: #fff;
}
#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;
  border-radius: 10px;
  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::after {
   transform: rotate(360deg);
   height: 0;
   opacity: 0;
}
#magnifying-glass:hover input {
  display: block;
}

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