Question

我试图用淡入和淡出图像来实现幻灯片。

但是，淡入淡出的基本内容对我不起作用。不透明度属性工作正常。这是不稳定的转变。但

我在使用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;
}

Answer 1

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

将鼠标悬停在图片上以查看此操作...

jsfiddle

＆＃13;

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;
}

＆＃13;

<div id="fadeDiv">
  <img class="fade-in" src="https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg" />
</div>

＆＃13;

Answer 2

要触发转换，您必须设置新的opacity。添加hover伪选择器是一种简单的方法，您还可以在JS中以编程方式更改不透明度：

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;
}

/* changes opacity on hover and triggers transition */
img:hover {
  opacity: 0.5;
}

.fade-in{
  opacity: 1;
  transition: opacity 2s linear;
}

<html>
  <title>Test Fade</title>
  <body>
    <div id="fadeDiv" >
      <img class="fade-in" src="https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg" />
	</div>
  </body>
</html>

Answer 3

这是使用淡入效果的元素背景更改的另一个解决方案：

body {background-position: center center;
         text-align: center;
       width: 250px;
         height: 250px;
         margin: 0px auto 0px auto;
        }

#fadeDiv{
    position: relative;
    top: 0px;
}

.fade-in {
    height: 200px;
    width: 200px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg");
    animation: bgFadeInOut 8s ease-in-out infinite;
}

@keyframes bgFadeInOut {
    0% {
       background-image: url("https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg");
    }
    34% {
       background-image: url("http://lorempixel.com/output/people-q-c-200-200-7.jpg");
    }
    66% {
       background-image: url("http://lorempixel.com/output/people-q-c-200-200-1.jpg");
   }
    100% {
       background-image: url("https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg");
    }

}

   <body>
  <br/>
  <br/>

        <div id="fadeDiv" >
    <div class="fade-in"></div>
        </div>

</body>

Answer 4

按照你的意见排序。

<强> HTML / JS

     <!DOCTYPE html>
    <html>
        <meta charset="utf-8" />
        <title>Test Fade</title>
        <link href="css/test2-style.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript">function fadeIn()
        {
            var img = document.getElementById("photo");
            setInterval(function()
            {
                img.className = "fade-in"; // Fade in over 2 secs
                setTimeout(function()
                {
                    img.className = "fade-out"; // Fade out after 2 secs
                }, 2000);
            }, 4000); // Cycle whole process every 4 secs
        }
        </script>

        <body onload="fadeIn()">
            <br/>
            <br/>

            <div id="fadeDiv">
                <img id="photo" class="" width="200" height="200" 
                src="https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg" />
            </div>

    </html>
</body>

<强> CSS

body {
    background-position: center center;
    text-align: center;
    width: 250px;
    height: 250px;
    margin: 0px auto 0px auto;
    }

#fadeDiv{
    position: relative;
    top: 0px;
    width: 200px;
    height: 200px;
}

img{
    height: 200px;
    width: 200px;
    opacity: 0;
}

.fade-in{
    opacity: 1;
    transition: opacity 2s linear;
}

.fade-out{
    opacity: 0;
    transition: opacity 2s linear;
}

CSS过渡：不透明的不透明度。。

4 个答案:

CSS过渡：不透明的不透明度。 。

4 个答案:

CSS过渡：不透明的不透明度。。