我试图实现一个带有淡入淡出图像的幻灯片。
但是淡入的基本功能对我来说不起作用。 不透明度属性工作正常。 卡住的是不透明度的过渡。
我使用的是装有 XP SP3 的旧 PC，如果这有什么不同的话。 我一直在使用 Firefox 和 Chrome 作为浏览器。 但我已经能够在这台 PC 上看到其他人的淡入淡出 fiddle 。 所以我很好奇为什么我的 fade-fiddle未按计划运行。
欢迎所有关于正确道路的想法。
HTML
<!DOCTYPE html>
<title>Test Fade</title>
<body>
<br/>
<br/>
<div class="fade-div" >
<img class="fade-in" src="https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg" />
</div>
</body>
CSS
body {
background-position: center center;
text-align: center;
width: 250px;
height: 250px;
margin: 0 auto;
}
.fade-div {
position: relative;
top: 0;
}
img {
height: 200px;
width: 200px;
}
.fade-in {
opacity: 1;
transition: opacity 2s linear;
}
最佳答案
您需要设置一个起始不透明度，然后在发生某些事情时过渡到另一个不透明度。
将鼠标悬停在图像上以查看实际效果...
body {
background-position: center center;
text-align: center;
width: 250px;
height: 250px;
margin: 0px auto 0px auto;
}
#fadeDiv {
position: relative;
top: 0px;
opacity: .5;
transition: opacity 2s linear;
}
#fadeDiv:hover {
opacity: 1;
}
img {
height: 200px;
width: 200px;
}<div id="fadeDiv">
<img class="fade-in" src="https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg" />
</div>关于CSS 过渡 : opacity not kicking in .，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42141739/