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代码。

通过以上所有措施，我的网站标题仍然无法以淡入效果幻灯片放映。我的问题是，似乎设置过渡属性不会改变任何东西，因为标题不透明度由我的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过渡，为未来敞开大门   动画效果。

这是在网络上制作动画的最高效的方式之一   支持，让浏览器进行自己的内部优化   没有黑客

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

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

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

1 个答案: