90 lines
2.6 KiB
HTML
90 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="description" content="%VITE_SUBTITLE%" />
|
|
<link rel="icon" href="./favicon.ico" />
|
|
<title>%VITE_TITLE%</title>
|
|
</head>
|
|
<body>
|
|
<div id="app" class="dark:bg-slate-900 dark:text-slate-200">
|
|
<div class="cube">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
font-family: Inter, '-apple-system', BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'noto sans', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
}
|
|
#app {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
user-select: none;
|
|
}
|
|
@keyframes cube {
|
|
0% {
|
|
transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
|
|
}
|
|
50% {
|
|
transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
|
|
}
|
|
100% {
|
|
transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
|
|
}
|
|
}
|
|
.cube {
|
|
animation: cube 2s infinite ease;
|
|
height: 40px;
|
|
transform-style: preserve-3d;
|
|
width: 40px;
|
|
}
|
|
.cube div {
|
|
background-color: rgba(255, 255, 255, 0.25);
|
|
height: 100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
border: 2px solid #000;
|
|
}
|
|
.cube div:nth-of-type(1) {
|
|
transform: translateZ(-20px) rotateY(180deg);
|
|
}
|
|
.cube div:nth-of-type(2) {
|
|
transform: rotateY(-270deg) translateX(50%);
|
|
transform-origin: top right;
|
|
}
|
|
.cube div:nth-of-type(3) {
|
|
transform: rotateY(270deg) translateX(-50%);
|
|
transform-origin: center left;
|
|
}
|
|
.cube div:nth-of-type(4) {
|
|
transform: rotateX(90deg) translateY(-50%);
|
|
transform-origin: top center;
|
|
}
|
|
.cube div:nth-of-type(5) {
|
|
transform: rotateX(-90deg) translateY(50%);
|
|
transform-origin: bottom center;
|
|
}
|
|
.cube div:nth-of-type(6) {
|
|
transform: translateZ(20px);
|
|
}
|
|
</style>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|