gpt4 book ai didi

CSS 过渡 : opacity not kicking in .

转载 作者:太空宇宙 更新时间:2023-11-03 22:45:29 25 4
gpt4 key购买 nike

我试图实现一个带有淡入淡出图像的幻灯片。

但是淡入的基本功能对我来说不起作用。不透明度属性工作正常。卡住的是不透明度的过渡。

我使用的是装有 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;
}

最佳答案

您需要设置一个起始不透明度,然后在发生某些事情时过渡到另一个不透明度。

将鼠标悬停在图像上以查看实际效果...

jsfiddle

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com