css css3 HTML实现网站欢迎页过渡

演示

一秒后直达主界面

css

html, body {

background: radial-gradient(#181818, #000000);

margin: 0;

padding: 0;

border: 0;

-ms-overflow-style: none;

}

::-webkit-scrollbar {

width: 0.5em;

height: 0.5em;

background-color: #c7c7c7;

}

/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

border-radius: 10px;

background-color: #181818;

}

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {

border-radius: 3px;

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);

background-color: #c7c7c7;

}

/*欢迎页*/

:root {

--gold: #ffb338;

--light-shadow: #77571d;

--dark-shadow: #3e2904;

}

.wrapper {

background: radial-gradient(#181818, #000000);

display: grid;

grid-template-areas: 'overlap';

place-content: center;

text-transform: uppercase;

height: 100vh;

}

.wrapper > div {

/*background-clip: revert;*/

-webkit-background-clip: text;

color: #363833;

font-family: 'Poppins', sans-serif;

font-weight: 900;

font-size: clamp(3em, 18vw, 15rem);

grid-area: overlap;

letter-spacing: 1px;

-webkit-text-stroke: 4px transparent;

}

div.bg {

background-image: repeating-linear-gradient(105deg,

var(--gold) 0%,

var(--dark-shadow) 5%,

var(--gold) 12%);

color: transparent;

filter: drop-shadow(5px 15px 15px black);

transform: scaleY(1.05);

transform-origin: top;

}

div.fg {

background-image: repeating-linear-gradient(5deg,

var(--gold) 0%,

var(--light-shadow) 23%,

var(--gold) 31%);

color: #1e2127;

transform: scale(1);

}

/* 淡出 */

.wrapper {

opacity: 1;

/* 动画时间随意调整 */

transition: all 0.5s;

}

.wrapper.fade-out {

opacity: 0;

}

/* 淡入 */

#interface {

opacity: 0;

/* 动画时间随意调整 */

transition: all 0.7s;

}

#interface.fade-in {

opacity: 1;

}

body

script

window.onload = function () {

document.getElementById("bg").innerText = "<・)))><<";

document.getElementById("fg").innerText = "<・)))><<";

document.getElementById("bannerTitle").innerText = "加载中......";

// 淡出效果

function myfun() {

let banner = document.getElementById("banner")

let interface = document.getElementById("interface");

banner.classList.add("fade-out")

interface.classList.add("fade-in")

setTimeout(() => {

banner.style.display = "none";

interface.style.display = "block";

}, 700);

}

timeout = setTimeout(myfun, 800);

}

完整HTML

content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1,maximum-scale=1">

content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"/>

精彩文章

 您阅读本篇文章共花了：