CSS3过渡效果问题
CSS3过渡效果问题
提问于 2014-04-07 14:30:43
我目前正在尝试学习CSS3技术，以便在我的网站上实现。我在网上找到了这个滑动图像框(http://www.pixelforlife.com/html-css3-sliding-image-boxes/)的代码。当你将鼠标悬停在这些框上时，它应该向上移动，以显示隐藏在其后面的文本。问题是，当我在chrome、firefox或IE上运行时，平滑过渡效果不起作用。我试着改变webkit的值和东西，但仍然不能让它工作。任何帮助都将不胜感激。
谢谢
<!doctype html>
<html lang="en">
<head>
<title> www.PixelForLife.com - Sliding Block </title>
<style type="text/css">
body { font: 13px sans-serif; }
#montage-wrap { width: 820px; height: 200px; }
.montage-block { width: 200px; height: 200px; float: left; display: block; overflow: hidden; position: relative;
margin: 0 4px 0 0; background: white; border: 1px solid #666;}
.montage-block:last-child { margin: 0; } /* removes margin on last block */
#block1 { width: 200px; height: 200px; position: absolute; display: block;
background: url("pixelforlife_thumb.png") no-repeat;
-webkit-transition: top .3s ease-in-out; }
.montage-block:hover #block1 { top: -150px; }
.thumb_content { padding: 70px 15px 0 15px; color: #777; }
.thumb_content h1 { margin: 0 0 5px 0; color: #666; font-size: 14px; }
</style>
</head>
<body>
<div id="montage-wrap">
<div class="montage-block">
<span id="block1"></span>
<div class="thumb_content">
<h1>Sample Title</h1>
<p>This is some sample title. yay for text.</p>
</div>
</div> <!-- block end -->
<!-- A sample Block -->
<div class="montage-block">
<span id="block1"></span>
<div class="thumb_content">
<h1>Sample Title</h1>
<p>This is some sample title. yay for text.</p>
</div>
</div> <!-- block end -->
</div> <!-- montage wrap -->
</body>
</html>回答 3
Stack Overflow用户
发布于 2014-04-07 14:40:36
我将css position: top更改为margin:top。
这对我很管用
#block1 {
width: 200px;
height: 200px;
position: absolute;
transition: all 0.5s ease-in-out;
}
.montage-block:hover #block1 {
margin-top: -100px;
}Demo
Stack Overflow用户
发布于 2014-04-07 14:52:47
可能这就是你想要的
#block1 {
background: url("pixelforlife_thumb.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: block;
height: 200px;
position: absolute;
top: 0;
transition-delay: 0.5s;
transition-duration: 1.5s;
transition-property: top;
width: 200px;
}在悬停时
#block1:hover {
top: -150px ;
}不要在同一页上使用相同的id。ID是每页的唯一。
Stack Overflow用户
发布于 2014-04-07 14:38:08
您有2个span具有相同的id：
<span id="block1"></span>把id="block1“改成class="block1”，别忘了在你的css里也改一下。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22905082
复制相关文章
相似问题
腾讯云开发者
