[英]Avoiding a CSS3 box-shadow to be seen while fading in a <li>
当用户单击按钮时,我正在淡入一些<li>
元素(框)。 这些盒子曾经有PNG背景 ,现在我要用纯CSS代替它们。 我使用的是CSS3 Shadows变得越来越聪明 ,使用li:after
。
这种方法的问题是,当我在fadeIn
的盒子里时,它们自然就会变得不透明,因此阴影会被看透 。
在<li>
元素上设置box-shadow
不会创建我想要的阴影效果。 我尝试创建一个在fadingIn完成后追加的附件,它可以工作但很明显。
有更好的主意吗?
可以通过将所有内容包装在li元素内的“包装器”元素中然后使li元素褪色来实现。
示例: http : //jsfiddle.net/petersendidit/ncBtV/1/embedded/result/
仅在Chrome开发人员和Firefox 4中进行了测试
动画制作完成后,您可以添加课程吗?
li.completed-fade {
box-shadow: ...
}
$('li').fadeIn(500, function() { $(this).addClass('completed-fade'); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.