这个代码片段 可以解释我的问题。我有一个带有overflow:hidden属性的容器,我想要被截断的内容平滑地被截断。在截断之前,字体应该慢慢变得更加透明。我已经找到了一种解决方案,可以在我的代码片段中看到。
我想知道是否有比我的解决方案更优雅的解决方案。现在有5个不同的透明度级别,但我想使用至少10个不同的级别。因此,代码会变得非常混乱。谢谢你的帮助!
以下是一个简短的HTML/CSS示例,展示了需要使用多少代码来实现这个小效果:
HTML
<div id="transparencydiv">
<div id="transparency1" class="transparencys"></div>
<div id="transparency2" class="transparencys"></div>
<div id="transparency3" class="transparencys"></div>
<div id="transparency4" class="transparencys"></div>
<div id="transparency5" class="transparencys"></div>
</div>
CSS
#transparencydiv{
position:absolute;
top:45%;
height:10%; width:100%;
}
.transparencys{
float:right;
height:100%;width:2ex;
background-color:black;
z-index:5;
}
#transparency1{opacity:0.9;margin-right:2%;}
#transparency2{opacity:0.7;}
#transparency3{opacity:0.5;}
#transparency4{opacity:0.3;}
#transparency5{opacity:0.1;}
z-index:3
,因为要使这个工作正常运行,由于#content
有一个 z-index 值为1,你需要至少将#scrollmenu:after
设置为z-index:2
,才能让:after
伪元素可见!Fiddle链接: http://jsfiddle.net/Marventus/bgm63eeL/ - Marventus