Question

我正在开发一个网站，并已成功将其从html4.0转换为带有响应式CSS的html5。

但最后，我正面临一个问题。原始网站在页脚中有一个图像，在y轴上显示50％，并且当您将鼠标悬停在其上时显示隐藏它。实例 - ＆gt; bsonspec.org

图片位于<{3}}

源代码中 assets / cc.png 文件夹下方

提前致谢。

Answer 1

将过渡属性添加到'a.ro'

a.ro { 
    background-repeat: no-repeat;
    background-position: 0 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 150px;
    height: 70px;
    transition: all 0.2s ease-in-out; // add this line
}

Answer 2

添加到a.ro

-webkit-transition: background-image 0.2s ease-in-out; //or linear
transition: background-image 0.2s ease-in-out;

可能重复：CSS3 background image transition

在悬停css上滑动50％的图像

2 个答案: