给网站加一个开屏背景图
2025年11月27日 09:38
适配无刷新加载的页面更好，以下代码放在你的header文件，就是放到网站body最上面 保证优先加载
HTML
<div class="splash_container" id="splashContainer">
<div class="background_wrapper">
<img class="background_img" src="https://www.tmetu.cn/api/img/2560/" alt="我在人间凑数的日子" />
<div class="bg-overlay"></div>
</div>
<div class="splash_content">
<p class="splash_title">我在人间凑数的日子</p>
<p class="splash_motto">🍂总有人间一两风，填我十万八千梦🍂</p>
</div>
<div id="splash_scroll">
<svg class="icon splash_scroll_effects" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8222" width="30" height="30">
<path d="M0 505.135c0-0.723 0.723-2.168 0.723-2.89 3.613-18.79 13.007-33.243 29.628-42.637 7.227-4.336 15.176-5.782 23.125-6.504H961.13c20.234 0 35.41 8.672 46.973 24.57 8.671 12.285 12.285 25.293 10.84 40.469-2.891 23.124-18.79 43.359-42.637 49.14-6.504 1.445-13.008 2.168-20.234 2.168H58.535c-23.848 0-39.746-11.563-51.308-31.074-3.614-5.781-5.059-12.285-6.504-18.79 0-0.722-0.723-2.167-0.723-2.89v-11.562z m0-299.901c0-0.723 0.723-2.168 0.723-2.891 3.613-18.789 13.007-33.242 29.628-42.637 7.227-4.335 15.176-5.78 23.125-6.503H961.13c20.234 0 35.41 8.671 46.973 24.57 8.671 12.285 12.285 25.293 10.84 40.468-2.891 23.125-18.79 43.36-42.637 49.14-6.504 1.446-13.008 2.169-20.234 2.169H58.535c-23.848 0-39.746-11.563-51.308-31.074-3.614-5.782-5.059-12.285-6.504-18.79 0-1.445-0.723-2.89-0.723-3.613v-10.84z m51.308 657.614c-1.445 0-2.168-0.722-3.613-0.722-16.62-3.614-28.183-13.008-36.855-27.461-6.504-10.84-9.395-22.402-8.672-34.688 2.168-24.57 19.512-46.25 44.804-52.03 5.06-1.446 10.84-1.446 16.622-1.446h899.703c19.512 0 34.687 8.672 46.25 23.848 7.226 10.117 11.562 22.402 11.562 34.687 0 14.453-5.058 27.46-14.453 38.3-9.394 10.84-21.68 17.344-36.132 18.79-0.723 0-1.446 0-2.168 0.722H51.308zM1024 189.335c-0.723-2.168-0.723-5.058-1.445-7.226l1.445 7.226z" fill="#fff">
</path>
</svg>
</div>
</div>CSS
.splash_container{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#00000090;color:#FFFFFF;z-index:9999;transition:transform 1.2s cubic-bezier(0.34,1.56,0.64,1);backdrop-filter:blur(20px)}
.splash_container.scroll_up{transform:translateY(-100%)}
.background_wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}
.background_img{width:100%;height:100%;object-fit:cover}
.bg-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.4)}
.splash_content{text-align:center;padding:0 20px}
.splash_title{font-size:3rem;font-weight:bold;text-shadow:0 2px 4px rgba(0,0,0,0.3);margin-bottom:1rem;opacity:0;animation:fadeIn 0.5s ease-out forwards}
.splash_motto{font-size:1.2rem;color:rgba(255,255,255,0.85);text-shadow:0 1px 2px rgba(0,0,0,0.2);opacity:0;animation:fadeIn 0.5s ease-out forwards;animation-delay:0.3s}
#splash_scroll{position:absolute;bottom:2rem;left:0;width:100%;text-align:center;cursor:pointer;opacity:0;animation:fadeIn 0.5s ease-out forwards;animation-delay:0.3s;transition:all 0.3s ease}
#splash_scroll:hover .splash_scroll_effects{transform:scale(1.1) translateY(-3px);opacity:0.9}
.splash_scroll_effects{transition:all 0.3s ease;fill:#FFF}
@keyframes fadeIn{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
@media (max-width:768px){
html .splash_title{font-size:2rem}
html .splash_motto{font-size:1rem}
html #splash_scroll{bottom:2rem}
html .splash_content{margin-top:-2rem}
html .splash_scroll_effects{width:24px;height:24px}
}JS
const splashContainer = document.getElementById('splashContainer');
const scrollDown = document.getElementById('splash_scroll');
// 点击整个开屏容器
splashContainer.addEventListener('click', (e) => {
if (e.target !== scrollDown && !scrollDown.contains(e.target)) {
splashContainer.classList.add('scroll_up');
}
});
// 点击箭头图标
scrollDown.addEventListener('click', () => {
splashContainer.classList.add('scroll_up');
});