如何在 css 图像交换中添加延迟？

Question

这是我用来交换图像的一个小 CSS。我将它们用于从绿色图像变为红色图像的 32 像素小社交图标。他们只是交换。

这是代码（使用占位符图像）：

.soc img:last-child {
  display: none;
}

.soc:hover img:first-child {
  display: none;
}

.soc:hover img:last-child {
  display: inline-block;
}

<li>
  <a class="soc" href="some-link-here" target="_blank">
    <img src="https://lorempixel.com/32/32/cats" />
    <img src="https://lorempixel.com/32/32/food" />
  </a>
</li>

我想在交换之间添加一点延迟。像 0.8 或 1.6 秒……所以图像/颜色变化之间的过渡更加平滑和漂亮。

过渡应该是这样的：从正常状态到悬停状态，而且，当你只是悬停并将鼠标移开时，回到正常状态也应该有延迟..这就是我想做的。

我尝试了各种我可以在谷歌上搜索到的延迟代码，但都没有成功。但我也不想将我使用的上述主要 css 代码更改为必须具有背景的代码 -图像，以便为每个图标制作不同的 5 行长 css 代码。

谁能帮我解决这个问题？

谢谢。

Answer 1

设置正确的opacity起点

:first-child 或 green 从 1 或 default 值开始，然后在 :hover 和 :first-child 上转到 0 或 red 从0 开始并在:hover 上转到1。

position:absolute 将对象堆叠在一起。

然后使用transition:opacity ease 1s 来获得平滑的动画效果。这个属性的作用是告诉浏览器在1s 的持续时间内淡出从opacity:0 到opacity:1 的转换。

将它添加到选择器而不是 pseudo-class :hover 可以在您悬停和离开 :hover 状态时进行平滑过渡。

.soc img {
  position: absolute;
  width: 40px;
  height: 40px;
  transition: opacity ease 1s;
}

.soc img:first-child {
  background: green
}

.soc:hover img:first-child {
  opacity: 0
}

.soc img:last-child {
  opacity: 0;
  background: red
}

.soc:hover img:last-child {
  opacity: 1
}

<li>
  <a class="soc" href="some-link-here" target="_blank">
    <img src="/iconslocation/icongreen.png" />
    <img src="/iconslocation/iconred.png" /></a>
</li>

Answer 2

听起来您想通过从一个淡入到另一个来柔化图像之间的过渡。我建议随着时间的推移使用 CSS 来transition 不透明度。

在下面的示例中，我将第二张图片绝对定位，因此它直接放置在第一张图片的前面，并将其设置为透明。然后我在悬停时淡入淡出。

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.soc {
  position: relative;
  display: inline-block;
}

.soc img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .2s;
}

.soc:hover img:last-child {
  opacity: 1;
}

<ul>
  <li>
    <a class="soc" href="some-link-here" target="_blank">
      <img src="//lorempixel.com/50/50/abstract/1/" />
      <img src="//lorempixel.com/50/50/abstract/2/" /></a>
  </li>  <li>
    <a class="soc" href="some-link-here" target="_blank">
      <img src="//lorempixel.com/50/50/abstract/3/" />
      <img src="//lorempixel.com/50/50/abstract/4/" /></a>
  </li>
</ul>

Answer 3

纯 CSS

如果我们将默认图像应用为所有a.soc 元素的background-image: url()，并为它们提供所有an :after pseudo element 并在:hover 上显示第二张图像（并且可以选择（并且最好是为了便于访问）:focus )，然后我们可以在用户交互时将:after 的opacity 的:after 元素 的transition 1 完全覆盖/隐藏opacity 它将覆盖/隐藏其父级的background-image。

效果符合预期，但不需要 <img> 标记，并且通过 CSS 的魔力自动应用于每个带有 class="soc" 的链接。

.soc,
.soc:after {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url( https://lorempixel.com/32/32/cats );
}
.soc:after {
  opacity: 0;
  content: "";
  position: absolute;
  background: url( https://lorempixel.com/32/32/food );
  transition: opacity 800ms; /* timing can be in seconds or milliseconds */
}
.soc:hover:after,
.soc:focus:after {
  opacity: 1;
}

<ul>
  <li><a class="soc" href="some-link-here" target="_blank"></a></li>
  <li><a class="soc" href="some-other-link-here" target="_blank"></a></li>
  <li><a class="soc" href="another-link-here" target="_blank"></a></li>
</ul>