Html 动画CSS伪类

我试图创建一个搜索图标，当鼠标悬停在上面时，它会转换为输入。我使用伪类

：：after

作为放大镜的手柄。基本上，当图标悬停在上方时，我希望控制柄平滑地消失。这里有一个链接到我的

正文{
文本对齐：居中；
}
#放大镜{
显示器：flex；
证明内容：中心；
高度：100px；
宽度：100px；
边界半径：100px；
边框：14px实心红色；
保证金：0自动；
利润上限：200px；
过渡：1s；
}
#放大镜{
内容：“；
高度：50px；
宽度：14px；
背景色：红色；
变换：旋转（-45度）；
位置：相对位置；
顶部：85px；
左：50px；
-webkit转换：1s；
-moz跃迁：1s；
-o-转变：1s；
过渡：1s；
}
输入{
显示：无；
边界：无；
宽度：70%；
字号：2.5em；
边界半径：40px；
}
输入：焦点{
大纲：无；
}
#放大镜：悬停{
宽度：300px；
}
#放大镜：悬停#放大镜：：之后{
宽度：0px；
}
#放大镜：悬停输入{
显示：块；
}

---

向悬停状态添加一个

不透明度：0

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

演示：

---

一小条

正文{
文本对齐：居中；
背景：#fff；
}
#放大镜{
显示器：flex；
证明内容：中心；
高度：100px；
宽度：100px；
边界半径：100px；
边框：14px实心红色；
保证金：0自动；
利润上限：200px；
过渡：1s；
}
#放大镜{
内容：“；
高度：50px；
宽度：14px；
边界半径：10px；
背景色：红色；
变换：旋转（-45度）；
位置：相对位置；
顶部：85px；
左：50px；
-webkit转换：1s；
-moz跃迁：1s；
-o-转变：1s；
过渡：1s；
}
输入{
显示：无；
边界：无；
宽度：70%；
字号：2.5em；
边界半径：40px；
}
输入：焦点{
大纲：无；
}
#放大镜：悬停{
宽度：300px；
}
#放大镜：悬停：：后{
变换：旋转（360度）；
身高：0；
不透明度：0；
}
#放大镜：悬停输入{
显示：块；
}

---

如果您希望它平稳消失，并且不太剧烈，请将下面的转换时间更改为以下时间

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

---

这是一个带有这些变化的代码笔

只是想知道为什么你有很多不需要的代码在那里？正如在关键帧中一样，它们似乎对他正在做的事情没有任何好处。你所说的不需要的代码是什么意思？我已经提供了一个例子，说明了它的作用以及为什么需要它。关键帧并没有给动画带来任何好处，他想要一个更平滑的动画，除非我读错了，过渡时间和不透明度会使它更平滑，你只需要在一个地方添加不透明度就可以了！谢谢你的提示。我以前也这么做过，但由于某些原因，它没有像预期的那样工作。这就是我使用关键帧的原因。我会更正答案的。而且你的票比我的票高。但最好在你的文章中举个例子。：）我刚刚添加了一个代码笔，但是我无法让手柄从它消失的位置显示回来，它默认在重新出现的中心。如果答案提供了帮助，请随意勾选复选标记以标记为answered@Jerad谢谢你的编辑，我错过了那一点：）嘿！没问题