CSS3 背景图像过渡



在这个网站中,我正在制作一个箭头链接,当您将鼠标悬停在它上面时,它会变成一个新图像,并在图像中添加了一个很酷的附加物。 我在下面的代码中完全可以正常工作,我根本没有编辑代码,但似乎当我醒来时,"所有"过渡不再适用于此。 我找不到问题所在。我还使用它来淡化纯色的背景图像,以淡入另一个不同的纯色背景图像。

a.visitarrow
{
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
-ms-transition:all 1.0s ease-in-out;        
transition:all 1.0s ease-in-out;
display:block;
width:130;
height:121;
background-image:url('pictures/visit.png');
}
a.visitarrow:hover
{
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;        
transition:all 0.5s ease-in-out;
display:block;
width:130;
height:121;
background-image:url('pictures/visithover.png');
}

我相信这应该有效:

a.visitarrow {
    display: block;
    width: 130;
    height: 121;
    -webkit-transition: 1.0s ease-in-out;
    -moz-transition: 1.0s ease-in-out;
    -o-transition: 1.0s ease-in-out;
    -ms-transition: 1.0s ease-in-out;        
    transition: 1.0s ease-in-out;
    background-image: url('pictures/visit.png');
}
a.visitarrow:hover {
    background-image: url('pictures/visithover.png');
}

相关内容

  • 没有找到相关文章

最新更新