html5一个网页到另一个网页淡出淡入的完整代码
时间: 2023-11-11 14:04:23 浏览: 64
以下是一个实现网页之间淡出淡入效果的完整代码示例:
HTML (第一个网页):
```html
<!DOCTYPE html>
<html>
<head>
<title>第一个网页</title>
<style>
.fade-out {
opacity: 1;
transition: opacity 1s ease;
}
.fade-out.fade {
opacity: 0;
}
</style>
</head>
<body>
<div class="fade-out">
<!-- 第一个网页的内容 -->
<h1>第一个网页</h1>
</div>
<script>
// 在合适的时机添加 fade 类名以触发淡出效果
document.querySelector('.fade-out').classList.add('fade');
// 等待淡出效果完成后,跳转到第二个网页
setTimeout(function() {
window.location.href = 'second_page.html';
}, 1000); // 1000毫秒(1秒)后跳转
</script>
</body>
</html>
```
HTML (第二个网页):
```html
<!DOCTYPE html>
<html>
<head>
<title>第二个网页</title>
<style>
.fade-in {
opacity: 0;
transition: opacity 1s ease;
}
.fade-in.show {
opacity: 1;
}
</style>
</head>
<body>
<div class="fade-in">
<!-- 第二个网页的内容 -->
<h1>第二个网页</h1>
</div>
<script>
// 在页面加载完成后执行淡入效果
window.onload = function() {
// 获取页面元素
var fadeElement = document.querySelector('.fade-in');
// 添加 show 类名以触发淡入效果
fadeElement.classList.add('show');
};
</script>
</body>
</html>
```
这个示例包括两个网页,第一个网页通过添加 `.fade` 类名来触发淡出效果,并在淡出完成后跳转到第二个网页。第二个网页通过添加 `.show` 类名来触发淡入效果。
你可以根据自己的需求调整过渡的时间、样式和触发的时机。希望对你有所帮助!如果还有其他问题,请继续提问。