这是我的小提琴.
我只是希望background-image:
css中的" "完全加载并在3秒后显示快速淡入效果,直到那时整个div必须是黑色.
怎么可能在css
或javascript
.
.initials {
position:absolute;
background:black;
background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
color:white;
margin-top:20px;
padding-top:20px;
padding-bottom:20px;
width:60px;
text-align:center;
margin-left:20px;
font-size:17px;
letter-spacing:5px;
box-shadow:0px 2px 3px rgba(0,0,0,.15);
overflow: hidden;
white-space: nowrap;
}
A
通过一些细微的变化,我可能只用CSS3就能达到你想要的效果.检查小提琴:http://jsfiddle.net/w11r4o3u/
CSS:
.initials { position:relative; background:black; color:white; margin-top:20px; padding-top:20px; padding-bottom:20px; width:60px; text-align:center; margin-left:20px; font-size:17px; letter-spacing:5px; box-shadow:0px 2px 3px rgba(0,0,0,.15); overflow: hidden; white-space: nowrap; } .initials .text { position: relative; } @-webkit-keyframes test { 0% { opacity: 0; } 100% { opacity: 1 } } .initials:before{ content: ""; background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif"); position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation-name: test; -webkit-animation-duration: 3s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-out; }
HTML:
A
编辑:
现在动画在3秒后开始,需要0.3秒才能完成.这是小提琴:http://jsfiddle.net/w11r4o3u/1/
要调整fadeIn发生的"速度",请编辑 -webkit-animation-duration: .3s;
如果要调整动画"延迟"以启动,请编辑 -webkit-animation-delay: 3s;
也许这样......虽然淡入还很棘手--AFAIK你不能淡化背景图像属性
setTimeout(function(){ $('.initials').css('background-image', 'url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif")'); }, 3000)
另一个选择是将HTML分成3个部分,具有最高z-index的字母,然后是星形层上的黑色层...然后淡出黑色层