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">
|
||||
<main class="main">
|
||||
<h1 id="floating-title" class="title gradient">
|
||||
<h1 class="title gradient">
|
||||
♥️ 物联网专业の在线学习平台 ♥️
|
||||
</h1>
|
||||
<h2 class="subtitle"></h2>
|
||||
@@ -192,7 +192,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
<script type="module" src="/floating-title.js"></script>
|
||||
<script type="module" src="/rain-icons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
28
style.css
28
style.css
@@ -2,23 +2,6 @@ html,
|
||||
body {
|
||||
padding: 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:
|
||||
radial-gradient(
|
||||
circle at 20% 80%,
|
||||
@@ -473,7 +456,6 @@ a:hover {
|
||||
color: #ff69b4;
|
||||
text-shadow: 2px 2px 4px rgba(255, 105, 180, 0.3);
|
||||
letter-spacing: 0.02em;
|
||||
animation: centerRotate 4s linear infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@@ -493,19 +475,9 @@ a:hover {
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
animation:
|
||||
centerRotate 4s linear 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 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
|
||||
Reference in New Issue
Block a user