Javascript：网站标题幻灯片淡入效果

Question

由于这是一个相当长的问题，感谢那些不愿阅读它的人！ 我正在做一个个人博客网站项目，在索引页面中，我想要实现一个幻灯片标题（包含背景图片，标题和将用户重定向到实际psot的按钮）以动态显示特色博客文章。 当标题转换为另一个标题时，我还希望使用淡入效果。 我的html标题看起来像这样：

 var slideIndex = 0; function carousel() { var i; var x = document.getElementsByClassName("header-slide"); for (i = 0; i < x.length; i++) { x[i].style.opacity = 0; x[i].style.display = "none"; } slideIndex++; if (slideIndex > x.length) { slideIndex = 1; } x[slideIndex - 1].style.opacity = 1; x[slideIndex - 1].style.display = "block"; setTimeout(carousel, 3000); } 

 .header-1 { background-image: linear-gradient(rgba(0, 0, 0, 0.29), #000), url(background-image#1); background-size: cover; background-position: center; background-attachment: fixed; height: 100vh; } .header-2 { background-image: linear-gradient(rgba(0, 0, 0, 0.29), #000), url(background-image#2); background-size: cover; background-position: center; background-attachment: fixed; height: 100vh; } .header-3 { background-image: linear-gradient(rgba(0, 0, 0, 0.29), #000), url(background-image#3); background-size: cover; background-position: center; background-attachment: fixed; height: 100vh; } .header-style { display: none; transition: opacity .5s ease-in; } 

 <div class="slideshow-container"> <div class="header-slide"> <header class="header-1"> <nav> <div class="row"> <ul class="main-nav"> <li><a href="article_directory.html">Articles</a></li> <li><a href="http://collegiatecycling.org/accc/">Collegiate Racing</a></li> <li><a href="photo_gallery.html">Multimedia</a></li> <li><a href="current_projects.html">Current Porjects</a></li> <li><a href="get_in_touch.php">Get in touch</a></li> <li><a href="#first-footer-child">External</a></li> </ul> </div> </nav> <div class="hero-text-box"> <h1>Article#1</h1> <a class="btn btn-full" href="#">Read full story</a> </div> </header> </div> <div class="header-slide"> <header class="header-2"> <nav> <div class="row"> <ul class="main-nav"> <li><a href="article_directory.html">Articles</a></li> <li><a href="http://collegiatecycling.org/accc/">Collegiate Racing</a></li> <li><a href="photo_gallery.html">Multimedia</a></li> <li><a href="current_projects.html">Current Porjects</a></li> <li><a href="get_in_touch.php">Get in touch</a></li> <li><a href="#first-footer-child">External</a></li> </ul> </div> </nav> <div class="hero-text-box"> <h1>Article#2</h1> <a class="btn btn-full" href="#">Read more</a> </div> </header> </div> <div class="header-slide"> <header class="header-3"> <nav> <div class="row"> <ul class="main-nav"> <li><a href="article_directory.html">Articles</a></li> <li><a href="http://collegiatecycling.org/accc/">Collegiate Racing</a></li> <li><a href="photo_gallery.html">Multimedia</a></li> <li><a href="current_projects.html">Current Porjects</a></li> <li><a href="get_in_touch.php">Get in touch</a></li> <li><a href="#first-footer-child">External</a></li> </ul> </div> </nav> <div class="hero-text-box"> <h1>Article#3</h1> <a class="btn btn-full" href="#">Read more</a> </div> </header> </div> </div> 

我已经有了以下js脚本，该脚本虽然嵌入html文件中，但确实可以幻灯片显示标题，但无法实现淡入效果。

我也希望淡入效果，因此添加了以下CSS代码。

通过上述所有措施，我的网站标题仍无法以淡入效果进行幻灯片放映。 我的问题是，似乎设置transition属性不会发生任何变化，因为标头的不透明度是由我的js脚本更改的（所以每次将其从0更改为1时，CSS都会处理它的更改）？ 任何帮助表示赞赏！

Answer 1

使用CSS关键帧动画：

 #header { animation: fade 5s ease-out infinite; } @keyframes fade { 0% { opacity: .1 } 100% { opacity: 1 } } 

 <div id="header"> <img src="https://c1.staticflickr.com/5/4016/4543539771_1325623dd6.jpg"></img> </div> 

或看看浏览器的本地动画api：

Web Animations API向开发人员打开浏览器的动画引擎，并通过JavaScript对其进行操作。

该API旨在作为CSS动画和CSS过渡的实现的基础，并为将来的动画效果打开了大门。

这是在支持的Web上进行动画制作的最高效的方法之一，使浏览器可以进行自己的内部优化而不会受到黑客攻击

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

https://stackoverflow.com/a/53785137/2494754