Javascript 悬停颜色过渡幻灯片效果

我有一个链接，改变颜色时，鼠标悬停在它上面，我完全符合这一点的编码，但我想无论如何效果下滑，而不是只是改变颜色。css是如何做到这一点的。我已经查看了堆栈溢出，但只能找到人们使用背景图像并改变其位置的实例。这是实现这一目标的唯一途径吗

我很难说出我想要达到的目的，但它已经在这个网站weblounge上展示了。我想要达到的效果是在主页上的两个链接上

#contactlink{
显示：内联块；
字号：700；
文本转换：大写；
填充：11px 51px；
边框：1px实心#fff；
-webkit转换：.2s；
过渡：.2s；
左边距：78像素；
边缘顶端：40px；
浮动：左；
颜色：#FFF；
文字装饰：无；
-webkit转换：.2s；
过渡：.2s；
文字装饰：无；
不透明度：0；
}
#联系人链接：悬停{
背景色：#FFF；
颜色：#666；
边框：1px实心#fff；
-webkit转换：.2s；
过渡：.2s；
}

---

我不知道你为什么要在白色上使用白色，基于我的理解，我已经为你提供了一些东西

#contactlink{
背景#1568b6；
颜色：#fff；
显示：内联块；
线高：正常；
填充：17px 20px 16px 20px；
位置：相对位置；
字号：700；
文本转换：大写；
文字装饰：无；
字体大小：14px；
字母间距：1px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
-webkit转换：背景。15s；
-moz跃迁：背景。15s；
-ms转换：背景。15s；
-o-转变：背景。15s；
过渡：背景。15秒
}
#接触链路跨距{
位置：相对位置；
z指数：1；
-webkit转换：彩色.25s；
-moz过渡：彩色.25s；
-ms转换：彩色。25s；
-o-过渡：彩色。25s；
过渡：颜色。25s
}
#联系方式：之前{
背景：#6c6c；
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
底部：0；
z指数：0；
显示：块；
填充：0；
-webkit变换：比例（1,0）；
-moz变换：比例（1,0）；
-ms变换：比例（1,0）；
-o变换：比例（1,0）；
变换：缩放（1,0）；
-webkit变换原点：中间-顶部；
变换原点：中心-顶部；
-webkit过渡：所有.25秒都可以轻松完成；
-moz过渡：所有.25秒都放松；
-ms过渡：所有.25秒都放松；
-o型过渡：所有0.25秒缓解；
过渡：全部。25秒放松
}
#contactlink:悬停：之前{
-webkit转换：规模（1）；
-moz变换：比例（1）；
-ms变换：尺度（1）；
-o变换：标度（1）；
变换：缩放（1）
}

---

您链接的网站通过将

：在

伪元素转换之前，将其比例置于按钮上方来实现链接。它还需要在按钮内部有一个

span

，这样它的

z-index

就可以设置在

：before

元素的顶部。以下是一个例子：

a.变色{
显示：内联块；
填充：15px；
颜色：黑色；
背景色：白色；
位置：相对位置；
填充：15px；
边框：1px纯黑；
文字装饰：无；
z指数：0；
}
a、 颜色变化：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景色：#777；
变换：缩放（1,0）；
过渡期：所有.25秒放松；
变换原点：中心-顶部；
z指数：0；
}
a、 颜色更改：悬停：之前{
变换：比例（1）；
}
a、 颜色变化范围{
z指数：1；
位置：相对位置；
}

---

您可以使用从新颜色到原始颜色的渐变，并设置后位属性的动画。您可以在白色上拨动代码。。嗯。也许你可以从白纸黑字中学到一些东西，因为在我的网页上实际上有一个背景图片——这是我的错，因为我没有为了问题的目的修改代码。道歉。很难说出我想要达到的目的，但是这个网站上已经展示了我想要达到的效果，在主页上的两个链接上。这太棒了。非常感谢。我不知道从哪里开始，但至少现在我知道我需要在哪里/什么地方阅读。我想这是围绕着给链接添加一个跨度，并能够应用z索引来实现的。