纯CSS

Question

这是我用来交换图像的一点css。我将它们用于从绿色图像到红色图像的小型32px社交图标。他们只是交换。

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

.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>

我想在掉期之间添加一点DELAY。像0.8或1.6秒..所以图像/颜色变化之间的过渡更平滑，更漂亮。

过渡应该是这样的：HOVER条件的正常条件，当你只是悬停并移动鼠标时，恢复到正常状态也应该有延迟..这就是我想做的。< / p>

我尝试了各种各样的DELAY代码，我能够谷歌，没有工作..但我也不想改变我使用的主要上述css代码，对于那些必须具有背景 - 因此，对于每个图标，我必须制作一个不同的5行长的CSS代码。

有人可以帮我解决这个问题吗？

谢谢。

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

设置正确的opacity起点

:first-child或绿色从1或默认值开始，并转到0上的:hover和{ {1}}或红色从:first-child开始，然后转到0上的1。

:hover将对象堆叠在一起。

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

将其添加到选择器而不是pseudo-class 1s会使您在悬停和离开：悬停状态时都进行平滑过渡。

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

Answer 3

纯CSS

如果我们将默认图片应用为所有first_list元素的background-image: url()，并为所有an :after pseudo element提供保留第二张图片a.soc以及（可选）并且理想情况下是:focus），我们可以transition :hover 元素的<{3}} 到:after用户互动并且在完整1时，它将覆盖/隐藏其父级opacity。

效果符合预期，但不需要background-image标记，并且会通过CSS的魔力自动应用于<img>的每个链接。

＆＃13;

class="soc"

＆＃13;

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

＆＃13;

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

3 个答案:

纯CSS