悬停时的过渡按钮答案

【问题标题】：Transition button when hovering悬停时的过渡按钮
【发布时间】：2019-02-02 19:29:13
【问题描述】：

我有这张 2048x512 的图像，有 4 个过渡阶段，但我不知道如何使它工作。

我知道当鼠标悬停在它上面时如何让它变成最后一个阶段，但是我如何给它添加transition效果呢？

#instagram {
    width: 512px; height: 512px;
    background: url('/host/instagram.png') no-repeat left top;
}
#instagram:hover { background-position: -1542px 0px }

【问题讨论】：

我不完全理解你的问题，你也添加了一个 jquery 标签。你是用 CSS 还是 Jquery 做的？
在你的情况下，你能不能只为背景颜色做一个转换，因为背景图像不是标准的动画属性（Chrome、Opera 和 Safari 确实支持它）。无论如何rewish.github.io/jquery-bgswitcher 是一个可能对你有帮助的 jquery 插件。
您在寻找什么样的过渡？您可以添加transition: background-position .2s，但我不确定您是否要这样做。
你看到那个 instagram 按钮在按钮上是如何转换的吗？这就是我想要实现的目标：petermosiman.com/reel

标签： javascript jquery css css-transitions

【解决方案1】：

对于这个特定的示例，您实际上不需要过渡，因为所有帧都是相同颜色调色板（白色、灰色、黑色）的一部分。您可以使用具有transition 属性的一些基于字体的图标（即：font-awesome）并在hover 上更改它们的颜色：jsfiddle

HTML：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
...   
... 
<div class="icon-circle">
  <i class="fa fa-instagram"></i>
</div>

CSS：

.icon-circle {
  position: relative;
  border-radius: 50%;
  width: 512px;
  height: 512px;
  border: 2rem solid black;
  transition: all .8s linear;
}
.icon-circle:hover {
  background-color: black;
  color: white;
}
.fa-instagram {
  font-size: 20rem;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

但是，如果您确实想使用图像，对于精灵图像，您可以使用 CSS animation 和 steps() 属性：jsfiddle

HTML：

<div id="instagram"></div>

CSS：

#instagram {
  width: 512px; height: 512px;
  background: url('http://andreimartalog.com/host/instagram.png') no-repeat;
}
#instagram:hover { animation: enter 0.3s steps(3) forwards; }
@keyframes enter { 100% { background-position: -1536px } }

【讨论】：