悬停图像/图标上的 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的非文本部分。span

span {

  background-size: 100% 200%;

  background-image: linear-gradient(to bottom, white 50%, red 50%);

  color: transparent;

  font-family: webdings;

  font-size: 200px;

  transition: background-position 2s;

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-stroke-width: 5px;

  -webkit-text-stroke-color: red;

  text-stroke-width: 5px;

  text-stroke-color: red;

}

span:hover {

    background-position: 0 100%;

}

<span>Y</span>

Answer 2

好吧，如果css您可以选择使用，那么您可以看看这个：

.heart {

  background-color: red;

  height: 30px;

  width: 30px;

  transform: rotate(-45deg);

  transition: background-color 1s;

}

.heart::before,

.heart::after {

  content: '';

  background-color: red;

  height: 30px;

  width: 30px;

  border-radius: 50%;

  position: absolute;

  transition: background-color 1s;

}

.heart::before {

  top: -15px;

}

.heart::after {

  left: 15px;

}

.heart:hover,

.heart:hover::before,

.heart:hover::after {

  background-color: #F5A9AE;

}

body {

  display: flex;

  height: 100vh;

}

.heart {

  margin: auto;

}

<div class="heart"></div>

Answer 3

您可以使用背景动画来做到这一点，如下所示：

.heart {

  width: 50px;

  height:50px;

  padding-top:50px;

  background: 

    url("https://img.icons8.com/officexs/32/000000/like.png") bottom padding-box content-box,

    linear-gradient(#fff,#fff) bottom padding-box content-box,

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

  background-size:100% 100%;

  background-repeat:no-repeat;

  box-sizing:border-box;

  transition:0.5s;

}

.heart:hover {

   padding-top:0;

}

<div class="heart"></div>