Scribd
Upload
1 views2 pages

Web

This document is an HTML file that creates a web page with a black background and two white circles that follow the mouse cursor. The size of the circles adjusts based on the window's area, and their movement is smoothed using requestAnimationFrame for a fluid visual effect. The script includes event listeners for mouse movement and window resizing to ensure the circles respond dynamically to user interactions.

Uploaded by

josephtyouyou
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
1 views2 pages

Web

This document is an HTML file that creates a web page with a black background and two white circles that follow the mouse cursor. The size of the circles adjusts based on the window's area, and their movement is smoothed using requestAnimationFrame for a fluid visual effect. The script includes event listeners for mouse movement and window resizing to ensure the circles respond dynamically to user interactions.

Uploaded by

josephtyouyou
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mitsuki v0.1</title>
<style>
/* 设置网页背景为黑色 */
body {
margin: 0;
height: 100vh;
background-color: black;
overflow: hidden; /* 隐藏滚动条 */
cursor: none; /* 隐藏默认光标 */
}

/* 圆形的样式 */
.circle {
position: absolute;
background-color: white;
border-radius: 50%;
pointer-events: none; /* 防止圆形影响光标事件 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<div class="circle" id="circle1"></div>


<div class="circle" id="circle2"></div>

<script>
// 获取两个圆形元素
const circle1 = document.getElementById('circle1');
const circle2 = document.getElementById('circle2');

// 目标光标位置
let targetX = 0;
let targetY = 0;

// 当前光标位置（圆形的位置）
let currentX1 = 0, currentY1 = 0;
let currentX2 = 0, currentY2 = 0;

// 圆形的移动速度（即延迟的程度），值越小，圆形越快追赶
const speed = 0.1;

let stre = 10;


let strm = 15;
let ewd = 4.5;

// 更新圆形大小，基于窗口的面积
function updateCircleSize() {
let width = window.innerWidth;
let height = window.innerHeight;
let area = width * height;
let radius = Math.sqrt(area / 50) / 2; // 圆形的半径是网页面积的五十分之一

// 设置圆形大小
circle1.style.width = `${radius * 2}px`;
circle1.style.height = `${radius * 2}px`;
circle2.style.width = `${radius * 2}px`;
circle2.style.height = `${radius * 2}px`;
}

// 页面加载完成时初始化圆形大小
window.onload = updateCircleSize;
// 每次窗口大小改变时更新圆形大小
window.onresize = updateCircleSize;

// 光标位置跟随
document.addEventListener('mousemove', (e) => {
targetX = e.clientX;
targetY = e.clientY;
});

// 使用 requestAnimationFrame 实现平滑过渡
function smoothFollow() {
// 计算当前光标位置和目标位置的差值
const deltaX1 = targetX - currentX1;
const deltaY1 = targetY - currentY1;
const deltaX2 = targetX - currentX2;
const deltaY2 = targetY - currentY2;

// 使用插值公式平滑过渡
currentX1 += (deltaX1 * speed);
currentY1 += (deltaY1 * speed);
currentX2 += (deltaX2 * speed);
currentY2 += (deltaY2 * speed);

// 获取浏览器的宽度
let width = window.innerWidth;
let height = window.innerHeight;

// 更新圆形的位置，将横坐标增加 width / 2
circle1.style.left = `${(currentX1 / stre) + (width / 2) - (width / stre) /
2 - (width / ewd)}px`;
circle1.style.top = `${(currentY1 / stre) + (height / 2) - 5 * (height /
stre) / 8}px`;
circle2.style.left = `${(currentX2 / stre) + (width / 2) - (width / stre) /
2 + (width / ewd)}px`;
circle2.style.top = `${(currentY2 / stre) + (height / 2) - 5 * (height /
stre) / 8}px`;

// 继续请求下一帧
requestAnimationFrame(smoothFollow);
}

// 启动光标跟随的平滑动画
smoothFollow();
</script>

</body>
</html>

You might also like