我只想使用 css3 淡入和淡出图像(sprite)。下面的代码提供了对所有图像的转换。帮助我在 css sprite 中淡入和淡出下面的图像。
HTML 代码
<div class="navigation">
<div class="navigation1 process-normal" id="process"></div>
<div class="navigation1 works-normal" id="works"></div>
<div class="navigation1 team-normal" id="team"></div>
<div class="navigation1 products-normal" id="products"></div>
<div class="navigation1 services-normal" id="services"></div>
CSS
.services-active, .products-active, .works-active,
.process-normal, .process-active, .products-normal, .team-normal, .team-active,
.works-normal,.brain,.static,.services,.people,.servies-normal
{ display: block; background: url('allimages.png') no-repeat; }
.navigation1
{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
最佳答案
检查这个site ,了解如何使用图像 sprites 实现 CSS 过渡。
DEMO (从上面的链接 fork )
HTML
<a href="#" class="arrow">Arrow<span></span></a>
CSS
.arrow {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 36px;
height: 36px;
background: url(sprites.png) no-repeat;
}
.arrow span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(sprites.png) no-repeat;
background-position: -50px 0;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.arrow:active span {
opacity: 1;
}
关于html - 使用 css3 Sprite 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14018839/