This commit is contained in:
@@ -1,57 +0,0 @@
|
|||||||
// 标题飘动动画,边缘碰撞
|
|
||||||
window.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const title = document.getElementById('floating-title');
|
|
||||||
if (!title) return;
|
|
||||||
|
|
||||||
let x = 50, y = 50;
|
|
||||||
let vx = 1.2, vy = 0.8;
|
|
||||||
let ax = 0, ay = 0;
|
|
||||||
let lastChange = Date.now();
|
|
||||||
|
|
||||||
function randomizeVelocity() {
|
|
||||||
// 每隔一段时间随机微调速度,模拟自然漂浮
|
|
||||||
if (Date.now() - lastChange > 1200) {
|
|
||||||
vx += (Math.random() - 0.5) * 0.6;
|
|
||||||
vy += (Math.random() - 0.5) * 0.6;
|
|
||||||
// 限制最大速度,避免太快
|
|
||||||
vx = Math.max(-2, Math.min(2, vx));
|
|
||||||
vy = Math.max(-1.5, Math.min(1.5, vy));
|
|
||||||
lastChange = Date.now();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const updatePosition = () => {
|
|
||||||
const ww = window.innerWidth;
|
|
||||||
const wh = window.innerHeight;
|
|
||||||
const rect = title.getBoundingClientRect();
|
|
||||||
|
|
||||||
randomizeVelocity();
|
|
||||||
|
|
||||||
// 缓动效果
|
|
||||||
x += vx;
|
|
||||||
y += vy;
|
|
||||||
|
|
||||||
// 边缘碰撞检测,带一点弹性和缓冲
|
|
||||||
if (x <= 0) {
|
|
||||||
x = 0;
|
|
||||||
vx = Math.abs(vx) * (0.7 + Math.random() * 0.3);
|
|
||||||
}
|
|
||||||
if (x + rect.width >= ww) {
|
|
||||||
x = ww - rect.width;
|
|
||||||
vx = -Math.abs(vx) * (0.7 + Math.random() * 0.3);
|
|
||||||
}
|
|
||||||
if (y <= 0) {
|
|
||||||
y = 0;
|
|
||||||
vy = Math.abs(vy) * (0.7 + Math.random() * 0.3);
|
|
||||||
}
|
|
||||||
if (y + rect.height >= wh) {
|
|
||||||
y = wh - rect.height;
|
|
||||||
vy = -Math.abs(vy) * (0.7 + Math.random() * 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
title.style.left = x + 'px';
|
|
||||||
title.style.top = y + 'px';
|
|
||||||
requestAnimationFrame(updatePosition);
|
|
||||||
};
|
|
||||||
updatePosition();
|
|
||||||
});
|
|
||||||
@@ -91,7 +91,7 @@
|
|||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<main class="main">
|
<main class="main">
|
||||||
<h1 id="floating-title" class="title gradient">
|
<h1 class="title gradient">
|
||||||
♥️ 物联网专业の在线学习平台 ♥️
|
♥️ 物联网专业の在线学习平台 ♥️
|
||||||
</h1>
|
</h1>
|
||||||
<h2 class="subtitle"></h2>
|
<h2 class="subtitle"></h2>
|
||||||
@@ -192,7 +192,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script type="module" src="/main.js"></script>
|
<script type="module" src="/main.js"></script>
|
||||||
<script type="module" src="/floating-title.js"></script>
|
|
||||||
<script type="module" src="/rain-icons.js"></script>
|
<script type="module" src="/rain-icons.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
28
style.css
28
style.css
@@ -2,23 +2,6 @@ html,
|
|||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family:
|
|
||||||
"Orbitron",
|
|
||||||
"Roboto Mono",
|
|
||||||
"Fira Mono",
|
|
||||||
"Consolas",
|
|
||||||
monospace,
|
|
||||||
-apple-system,
|
|
||||||
BlinkMacSystemFont,
|
|
||||||
Segoe UI,
|
|
||||||
Roboto,
|
|
||||||
Oxygen,
|
|
||||||
Ubuntu,
|
|
||||||
Cantarell,
|
|
||||||
Fira Sans,
|
|
||||||
Droid Sans,
|
|
||||||
Helvetica Neue,
|
|
||||||
sans-serif;
|
|
||||||
background:
|
background:
|
||||||
radial-gradient(
|
radial-gradient(
|
||||||
circle at 20% 80%,
|
circle at 20% 80%,
|
||||||
@@ -473,7 +456,6 @@ a:hover {
|
|||||||
color: #ff69b4;
|
color: #ff69b4;
|
||||||
text-shadow: 2px 2px 4px rgba(255, 105, 180, 0.3);
|
text-shadow: 2px 2px 4px rgba(255, 105, 180, 0.3);
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
animation: centerRotate 4s linear infinite;
|
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -493,19 +475,9 @@ a:hover {
|
|||||||
color: transparent;
|
color: transparent;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
animation:
|
animation:
|
||||||
centerRotate 4s linear infinite,
|
|
||||||
rainbow 3s ease-in-out infinite;
|
rainbow 3s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
#floating-title {
|
|
||||||
position: absolute;
|
|
||||||
left: 50px;
|
|
||||||
top: 50px;
|
|
||||||
z-index: 1000;
|
|
||||||
transition: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes centerRotate {
|
@keyframes centerRotate {
|
||||||
0% {
|
0% {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
|
|||||||
Reference in New Issue
Block a user