open-source/solvable-sheep-game
1
0
Fork 0
mirror of https://ghproxy.com/https://github.com/StreakingMan/solvable-sheep-game synced 2026-07-29 18:56:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 主题初始化、资源缓存、UI交互等重构

Browse Source
This commit is contained in:
streakingman
2022-10-04 13:57:33 +08:00
parent 90852ce91d
commit 5e29a1e55a
53 changed files with 1075 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+172 -5
View File
@@ -19,18 +19,185 @@
s.parentNode.insertBefore(hm, s);
})();
</script>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: white;
transition: background-color 0.3s 0.4s;
color: rgb(0 0 0 / 60%);
}
a {
color: currentColor;
text-decoration: inherit;
}
#root {
transition: opacity 0.5s;
}
#loading {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 32px;
overflow: visible;
}
@keyframes move {
0% {
left: 0;
top: 0;
height: 50%;
width: 50%;
}
12.5% {
left: 0;
top: 0;
height: 50%;
width: 100%;
}
25% {
left: 50%;
top: 0;
height: 50%;
width: 50%;
}
37.5% {
left: 50%;
top: 0;
height: 100%;
width: 50%;
}
50% {
left: 50%;
top: 50%;
height: 50%;
width: 50%;
}
62.5% {
left: 0;
top: 50%;
height: 50%;
width: 100%;
}
75% {
left: 0;
top: 50%;
height: 50%;
width: 50%;
}
87.5% {
left: 0;
top: 0;
height: 100%;
width: 50%;
}
}
@keyframes wave {
0% {
transform: translateY(30px);
}
100% {
transform: translateY(-30px);
}
}
.loadingBlock {
position: absolute;
transition: 0.6s;
border-radius: 12px;
left: 0;
top: 0;
height: 50%;
width: 50%;
animation: move 1s infinite ease-in-out;
}
.loadingBlockContainer {
width: 64px;
height: 64px;
position: relative;
}
#loading.error .loadingBlock,
#loading.success .loadingBlock {
animation-play-state: paused;
}
.loadingBlock1 {
background-color: #8dac8588;
}
#loading.error .loadingBlock1 {
transform: rotate(75deg) translateX(30px);
animation: wave 1s infinite alternate;
}
#loading.success .loadingBlock1 {
transform: rotate(75deg) translateX(200px) scale(4);
transition-delay: 0.1s;
}
.loadingBlock2 {
background-color: #8dac8566;
animation-delay: 0.375s;
}
#loading.error .loadingBlock2 {
transform: rotate(175deg) translateX(10px);
}
#loading.success .loadingBlock2 {
transform: rotate(175deg) translateX(200px) scale(2);
transition-delay: 0.05s;
}
.loadingBlock3 {
background-color: #8dac8544;
animation-delay: 0.75s;
}
#loading.error .loadingBlock3 {
transform: rotate(225deg) translateX(20px);
}
#loading.success .loadingBlock3 {
transform: rotate(225deg) translateX(200px) scale(3);
}
#loadingTips {
font-size: 0.8em;
line-height: 1.8;
text-align: center;
transition: 0.3s;
}
#loading.success #loadingTips {
transform: translateY(300px);
opacity: 0;
}
#backHomeTip {
visibility: hidden;
}
</style>
</head>
<body>
<div id="root"></div>
<div id="root">
<!--数据加载提示在react渲染之前做-->
<div id="loading" class="loading">
<div class="loadingBlockContainer">
<div class="loadingBlock loadingBlock1"></div>
<div class="loadingBlock loadingBlock2"></div>
<div class="loadingBlock loadingBlock3"></div>
</div>
<div id="loadingTips">
<span id="loadingText">加载中...</span><br />
<span id="backHomeTip">
稍后再试或
<a href="/" style="color: #646cff"> 返回首页 </a>
</span>
</div>
</div>
</div>
<script>
// vite没有global，手动声明
var global = global || window;
</script>
<script type="module" src="/src/main.tsx"></script>
<script
async
src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
></script>
<script async>
// 如果您基于此项目二创，可以删除以下代码
// 否则请标明原仓库地址