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

答

您需要设置一个起点不透明度，然后有事时过渡到另一个不透明度。

将鼠标悬停在图片看到这个动作......

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>

答

要触发你必须设置一个新的opacity的过渡。添加hover伪选择器是一种简单的方法来做到这一点，你也可以通过编程改变不透明度JS：

body { 
 
    background-position: center center; 
 
    text-align: center; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin: 0px auto 0px auto; 
 
} 
 
\t 
 
#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" /> 
 
\t </div> 
 
    </body> 
 
</html>

感谢您的答案。我需要比悬停激活的过渡更自动的东西。我使用了一个简短的JS脚本，只要我考虑到转换的时间安排，它的工作就足够了。如果只有JSFiddle能够可靠地工作，那么我会告诉你完成的代码，但事实并非如此。 – Trunk

答

下面是使用元素背景变化与淡入-出一个更解决方案效果：

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>

答

根据您的建议分类。

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过渡：不透明度不透明。 。

相关推荐

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