悬停图像/图标上的 CSS 高度动画

Question

悬停时我的图标出现问题。我想img src在悬停时替换我的：这是到目前为止我的代码：

#aks {

  width: 0px;

  max-height: 0;

  transition: max-height 0.15s ease-out;

  overflow: hidden;

  background: url("https://img.icons8.com/windows/32/000000/like.png") no-repeat;

  padding: 50px;

}

#aks:hover {

  background: url("https://img.icons8.com/officexs/32/000000/like.png")

    no-repeat;

  max-height: 500px;

  transition: max-height 0.25s ease-in;

}

<img id="aks" src="https://img.icons8.com/windows/32/000000/like.png" />

我真正想要实现的是，当悬停在轮廓心形图标上时，将替换为心形填充图标，但在替换轮廓图标期间，它将从底部高度 0 到全高显示/动画，因此看起来像是填充了轮廓图标。这里有一些例子：codepen

除此之外的任何替代方案或解决方案都受到高度赞赏。提前致谢！

Answer 1

这对于仅使用 CSS 的心脏来说并不是特别容易，因为滑动动画必须应用于三个完全不同的元素（旋转的正方形，加上两个圆圈）。为了完整起见，这里是一个使用包含心形的字体的示例。为简单起见，我使用了 Webdings，但您应该在实际的实时代码中使用 Font Awesome。摘要是您的背景是 2 倍高的渐变，即 50% 白色和 50% 红色，并且您将背景从显示白色一半滑动到悬停时显示红色一半。它的两个重要属性目前仅适用于 webkit 浏览器：text-stroke，将轮廓添加到文本中 - 以及，剪辑背景background-clip的非文本部分。spanspan {&nbsp; background-size: 100% 200%;&nbsp; background-image: linear-gradient(to bottom, white 50%, red 50%);&nbsp; color: transparent;&nbsp; font-family: webdings;&nbsp; font-size: 200px;&nbsp; transition: background-position 2s;&nbsp; -webkit-background-clip: text;&nbsp; background-clip: text;&nbsp; -webkit-text-stroke-width: 5px;&nbsp; -webkit-text-stroke-color: red;&nbsp; text-stroke-width: 5px;&nbsp; text-stroke-color: red;}span:hover {&nbsp; &nbsp; background-position: 0 100%;}<span>Y</span>

Answer 2

好吧，如果css您可以选择使用，那么您可以看看这个：.heart {&nbsp; background-color: red;&nbsp; height: 30px;&nbsp; width: 30px;&nbsp; transform: rotate(-45deg);&nbsp; transition: background-color 1s;}.heart::before,.heart::after {&nbsp; content: '';&nbsp; background-color: red;&nbsp; height: 30px;&nbsp; width: 30px;&nbsp; border-radius: 50%;&nbsp; position: absolute;&nbsp; transition: background-color 1s;}.heart::before {&nbsp; top: -15px;}.heart::after {&nbsp; left: 15px;}.heart:hover,.heart:hover::before,.heart:hover::after {&nbsp; background-color: #F5A9AE;}body {&nbsp; display: flex;&nbsp; height: 100vh;}.heart {&nbsp; margin: auto;}<div class="heart"></div>

Answer 3

您可以使用背景动画来做到这一点，如下所示：.heart {&nbsp; width: 50px;&nbsp; height:50px;&nbsp; padding-top:50px;&nbsp; background:&nbsp;&nbsp; &nbsp; url("https://img.icons8.com/officexs/32/000000/like.png") bottom padding-box content-box,&nbsp; &nbsp; linear-gradient(#fff,#fff) bottom padding-box content-box,&nbsp; &nbsp; url("https://img.icons8.com/windows/32/000000/like.png");&nbsp; background-size:100% 100%;&nbsp; background-repeat:no-repeat;&nbsp; box-sizing:border-box;&nbsp; transition:0.5s;}.heart:hover {&nbsp; &nbsp;padding-top:0;}<div class="heart"></div>