Javascript:网站标题幻灯片淡入效果
Javascript:网站标题幻灯片淡入效果
提问于 2018-06-12 15:29:45
因为这是一个相当长的问题--提前感谢那些费心阅读它的人！我正在做一个个人博客网站项目，在索引页，我想实现一个幻灯片标题(包含一个背景图片，标题和一个按钮重定向用户到实际的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将如何处理它的更改)？感谢您的帮助！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-12 19:31:12
使用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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50811559
复制相关文章
相似问题