<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="" type="image/png" />
<link rel="apple-touch-icon" href="" />
<title></title>
<meta
name="viewport"
content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="x-dns-prefetch-control" content="on" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="manifest" id="manifest-placeholder" href="/static/mainfest.json" />
<style>
* {
margin: 0;
padding: 0;
}
.loading-screen {
overflow: hidden;
position: relative;
z-index: 999;
background-color: #fff;
width: 100vw;
height: 100vh;
}
.loadBox {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%);
font-size: 40px;
}
.loader {
width: 140px;
height: 16px;
-webkit-mask: linear-gradient(90deg, #000 70%, #0000 0) 0/12.5%; /* 使用遮罩效果，调整为 8 步的比例 */
background: linear-gradient(180deg, green 0%, green 100%) 0/0% no-repeat #ddd; /* 背景渐变 */
animation: cartoon 6s infinite steps(9); /* 修改动画步数为 8 */
margin-top: 40px; /* 上边距 */
}
@keyframes cartoon {
100% {
background-size: 112.5%;
}
}
/*骰子动画*/
.horizontal {
animation: rotate 1s linear infinite;
}
.cube {
transform: rotateX(-45deg) rotateY(45deg);
}
@keyframes rotate {
from {
transform: rotateY(0) rotateX(45deg) rotateZ(45deg);
}
to {
transform: rotateY(360deg) rotateX(45deg) rotateZ(45deg);
}
}
/*面的样式*/
.dice,
.vertical,
.horizontal,
.cube,
.face {
transform-style: preserve-3d;
}
.dice,
.vertical,
.horizontal,
.cube,
.face,
.face::after,
.axis-face {
width: 1em;
height: 1em;
}
.dice {
margin: auto;
}
.cube {
position: relative;
}
.face,
.face::after,
.axis-face {
position: absolute;
top: 0;
left: 0;
}
.face {
box-sizing: border-box;
padding: 0.15em;
background-color: white;
border-radius: 10%;
box-shadow: 0 0 0.1em #ccc inset;
}
.face::after {
content: '';
display: block;
border-radius: 0.1em;
transform: translateZ(-0.1px);
background-color: #e0e0e0;
}
.axis-face {
background: #e0e0e0;
}
/*点的样式*/
.dot {
width: 0.2em;
height: 0.2em;
display: inline-block;
background: #444;
border-radius: 50%;
box-shadow: inset 0.05em 0.05em 0.1em black;
}
/* 面的方位*/
.face.front {
transform: translateZ(0.5em);
}
.face.back {
transform: translateZ(-0.5em) rotateY(180deg);
}
.face.up {
transform: translateY(-50%) rotateX(90deg);
}
.face.down {
transform: translateY(50%) rotateX(-90deg);
}
.face.left {
transform: translateX(-50%) rotateY(-90deg);
}
.face.right {
transform: translateX(50%) rotateY(90deg);
}
.axis-face.x {
transform: rotateY(90deg);
}
.axis-face.y {
transform: rotateX(90deg);
}
.axis-face.z {
}
/* 点的排列布局*/
.face,
.dot-row {
display: flex;
}
.face.one {
align-items: center;
justify-content: center;
}
.face.two {
justify-content: space-around;
}
.face.two .dot:nth-child(2) {
align-self: flex-end;
}
.face.three {
justify-content: space-around;
}
.face.three .dot:nth-child(2) {
align-self: center;
}
.face.three .dot:nth-child(3) {
align-self: flex-end;
}
.face.four {
flex-direction: column;
justify-content: space-between;
}
.face.four .dot-row {
justify-content: space-between;
}
.face.five {
flex-direction: column;
justify-content: space-between;
}
.face.five .dot-row {
justify-content: space-between;
}
.face.five .dot-row:nth-child(2) {
justify-content: center;
}
.face.six {
flex-direction: column;
justify-content: space-around;
}
.face.six .dot-row {
justify-content: space-between;
}
</style>
</head>
<body>
<div id="loading-screen" class="loading-screen">
<div class="loadBox">
<div class="dice">
<div class="vertical">
<div class="horizontal">
<div class="cube">
<div class="face front one">
<span class="dot"></span>
</div>
<div class="face back two">
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="face up three">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="face down four">
<div class="dot-row">
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="dot-row">
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="face left five">
<div class="dot-row">
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="dot-row">
<span class="dot"></span>
</div>
<div class="dot-row">
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="face right six">
<div class="dot-row">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="dot-row">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="axis-face x"></div>
<div class="axis-face y"></div>
<div class="axis-face z"></div>
</div>
</div>
</div>
</div>
<div class="loader"></div>
</div>
</div>
<div id="app"></div>
<script>
document.getElementById('app').style.display = 'none'
window.onload = () => {
// 设置 MutationObserver
const innerElement = document.querySelector('#app')
const mutationObserver = new MutationObserver((mutationsList) => {
mutationsList.forEach((mutation) => {
if (mutation.type === 'attributes') {
// 隐藏loading
var loadingScreen = document.getElementById('loading-screen')
if (loadingScreen) {
// 删除节点
loadingScreen.remove()
document.getElementById('app').style.display = 'block'
}
}
//关闭观察
mutationObserver.disconnect()
})
})
// 观察内层元素的属性变化
mutationObserver.observe(innerElement, {
attributes: true,
subtree: true,
})
}
</script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
vue项目首屏预加载
于 2024-09-10 10:52:23 首次发布
扫一扫
1960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
