色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何用閃屏遮住頁眉？

CSS
李中冰1年前9瀏覽0評論

我為我的網(wǎng)站做了一個非常簡單的閃屏，但我對反應js很陌生，我不知道如何正確地解決這個問題。 我做的飛濺動畫是由一個js文件和一個css文件組成的。然而，當我加載網(wǎng)站時，我看到加載屏幕，但上面有標題。 這是我的app.jsx:

import React from 'react';
import "./App.css";
import Header from './components/header/Header';
import Home from './components/home/Home';
import About from './components/about/About';
import Skills from './components/skills/Skills';
import Services from './components/services/Services';
import Qualification from './components/qualification/Qualification';
import Work from './components/Portfolio/Work';
import Testimonials from './components/testimonials/Testimonials';
import Contact from './components/contact/Contact';
import Footer from './components/footer/Footer';
import ScrollUp from './components/scrollup/ScrollUp';

const App = () => {
return (
<>
  <Header />
  <main className='main'>
      <Home />
      <About />
      <Skills />
      <Services />
      <Qualification />
      <Work />
      <Testimonials />
      <Contact />
    </main><Footer /><ScrollUp />
  </>
)
}

export default App;

這是我的閃屏代碼:

let intro = document.querySelector('.intro');
let logo = document.querySelector('.logo-header');
let logoSpan = document.querySelectorAll('.logo');

window.addEventListener('DOMContentLoaded', ()=> {
setTimeout(()=>{

    logoSpan.forEach((span, idx)=>{
        setTimeout(()=>{
            span.classList.add('active');
        },(idx +1)*400)
    });
    setTimeout(()=>{
        logoSpan.forEach((span, idx)=>{
            setTimeout(()=>{
                span.classList.remove('active');
                span.classList.add('fade');
            }, (idx +1)*50)
        })
    },2000);
    setTimeout(() => {
        intro.style.top = '-100vh';
    }, 2300);
  })
})

這是我的HTML代碼:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/fabio.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" 
/>
<!--=============== BOXICONS ===============-->
<link  rel='stylesheet'>

<!--=============== UNICONS ===============-->
<link rel="stylesheet" 
href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<!--=============== SPLASH SCREEN LINK ===============-->
<link rel="stylesheet" href="splash.css">
<title>Fabio Portfolio</title>
</head>
<body>

<div class="intro">
  <h1 class="logo-header">
      <span class="logo">Fab</span><span class="logo">io</span>
  </h1>  
</div>

<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script type="module" type src="splash.js"></script>
</body>
</html>