我试图用淡入和淡出图像来实现幻灯片。CSS过渡:不透明度不透明。 。
但是淡入淡出的基本功能对我来说是行不通的。 不透明属性工作正常。 这是不透明度卡住的过渡。
我在使用XP SP3的旧PC上,如果这有什么区别的话。 我一直使用Firefox和Chrome作为浏览器。 但是我已经能够在PC上看到其他人的淡入淡出了。 所以我很好奇为什么我的fade-fiddle没有按计划运行。
所有想法正确的路径欢迎。
HTML
<!DOCTYPE html>
<title>Test Fade</title>
<body>
<br/>
<br/>
<div id="fadeDiv" >
<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: 0px auto 0px auto;
}
#fadeDiv{
position: relative;
top: 0px;
}
img{
height: 200px;
width: 200px;
}
.fade-in{
opacity: 1;
transition: opacity 2s linear;
}
你实际上并没有做任何应用过渡。 –
你需要这样的东西:http://stackoverflow.com/a/41593166/4206079但与图片 – Banzay