JavaScript 在页面之间淡入淡出-6ren

JavaScript 在页面之间淡入淡出

转载作者：行者123 更新时间：2023-11-28 04:44:54

首先，我对 JS 很陌生。我正在建立一个网站，它有一个介绍。此介绍动画必须放置在不同的页面中，结束后将自动加载下一个网页。

<body onload="setTimeout(
function(){
    window.location.href = 'file:///C:/Users/skatto/Desktop/art%20contest/art_contest_page.html';
}, 32000 )">

这是我在我的 html 文件上使用的自动加载下一页的脚本，但它非常“尖锐”和粗糙，我怎么能添加淡入淡出动画？为了更顺畅

最佳答案

一个简单的 CSS 就可以做到这一点。为什么要使用脚本？将动画 fadeIn 添加到您想要在加载前淡入的任何页面主体。

body {
  animation: fadeIn 0.5s linear;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div>
  Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>
</div>