格式化但是文本出现在100*100px框外,我不知道是什么我不见了,我只能看到盒子里的动画。
im正在尝试创建一个带有box拇指的下载页面描述文本来自右侧当鼠标在拇指上时
我几乎做了所有的事情我仍然用
有什么建议吗?
tnx
这是代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.div0 {
background:url('t_k1.png');
display:block;
width:100px;
height:100px;
position:relative;
}
div.div1 {
opacity:0;
display:block;
left:100px;
width:100px;
height:100px;
background:#999;
position:relative;
text-align:center;
vertical-align:-50px;
}
div.div0:hover div.div1 {
animation:mymove 2s forwards;
-moz-animation:mymove 2s forwards;
-webkit-animation:mymove 2s forwards;
-o-animation:mymove 2s forwards;
}
@keyframes mymove {
from {left:100px; opacity:0;}
to {left:0px; opacity:0.8;}
}
@-moz-keyframes mymove /*Firefox*/ {
from {left:100x; opacity:0;}
to {left:0px; opacity:0.8;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/ {
from {left:100px; opacity:0;}
to {left:0px; opacity:0.8;}
}
@-o-keyframes mymove /*Opera*/ {
from {left:100px; opacity:0;}
30% {opacity:0.2;}
to {left:0px; opacity:0.8;}
}
</style>
</head>
<body>
<div style="display:block; left:100px; top:100px; width:100px; height:100px; position:absolute;">
<div class="div0">
<div class="div1"><br /><br /><a href="#">prova</a></div>
</div></div>
</body>
</html>
http://jsfiddle.net/A97cc/
我更新了你的小提琴:http://jsfiddle.net/A97cc/1
为了防止元素在其父元素之外可见,您可以将overflow设置为隐藏在父元素上,在您的情况下为div0。