<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码雨与拖拽方框及卡片效果</title>
<style>
body {
margin: 0;
overflow: hidden;
background: black;
position: relative;
}
.drag-box {
position: absolute;
border: 6px solid rgba(255, 182, 193, 0.8); /* 浅粉色加粗边框 */
border-radius: 10px; /* 圆角 */
pointer-events: none; /* 避免鼠标事件干扰 */
box-shadow: 0 0 20px 10px rgba(255, 182, 193, 0.8); /* 边缘发光 */
}
.card {
position: absolute;
width: 200px;
height: 200px;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
}
.card:hover {
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
.card.selected {
color: #ff0; /* 文本变色 */
box-shadow: 0 0 20px 10px rgba(255, 255, 0, 0.8); /* 边缘发光 */
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="drag-box" class="drag-box"></div>
<div class="card" style="top: 50px; left: 50px;">Card 1</div>
<div class="card" style="top: 300px; left: 300px;">Card 2</div>
<div class="card" style="top: 550px; left: 550px;">Card 3</div>
<script>
window.onload = function() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const letters = '1234567890';
const fontSize = 16;
const columns = canvas.width / fontSize;
const drops = [];
for (let i = 0; i < columns; i++) {
drops[i] = 1;
}
function draw() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#0F0';
ctx.font = fontSize + 'px monospace';
for (let i = 0; i < drops.length; i++) {
const text = letters.charAt(Math.floor(Math.random() * letters.length));
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
if (drops[i] * fontSize > canvas.height && Math.random() > 0.95) {
drops[i] = 0;
}
drops[i]++;
}
}
setInterval(draw, 33);
};
let startX, startY;
let isDragging = false;
const dragBox = document.getElementById('drag-box');
let selectedElements = [];
document.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
dragBox.style.display = 'block'; // 显示方框
dragBox.style.left = `${startX}px`;
dragBox.style.top = `${startY}px`;
dragBox.style.width = '0px';
dragBox.style.height = '0px';
selectedElements = []; // 清空已选择的元素
document.querySelectorAll('.card').forEach(card => card.classList.remove('selected'));
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const width = Math.abs(e.clientX - startX);
const height = Math.abs(e.clientY - startY);
dragBox.style.width = `${width}px`;
dragBox.style.height = `${height}px`;
dragBox.style.left = `${Math.min(startX, e.clientX)}px`;
dragBox.style.top = `${Math.min(startY, e.clientY)}px`;
// 检测方框是否覆盖卡片元素
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
const cardRect = card.getBoundingClientRect();
const dragRect = dragBox.getBoundingClientRect();
if (cardRect.left < dragRect.right && cardRect.right > dragRect.left && cardRect.top < dragRect.bottom && cardRect.bottom > dragRect.top) {
if (!selectedElements.includes(card)) {
card.classList.add('selected');
selectedElements.push(card);
}
} else if (selectedElements.includes(card)) {
card.classList.remove('selected');
selectedElements.splice(selectedElements.indexOf(card), 1);
}
});
});
document.addEventListener('mouseup', () => {
isDragging = false;
dragBox.style.display = 'none'; // 隐藏方框
});
// 点击任意位置或空白区域取消颜色和发光效果
document.addEventListener('click', (e) => {
if (!dragBox.contains(e.target)) {
document.querySelectorAll('.card').forEach(card => card.classList.remove('selected'));
selectedElements = [];
}
});
</script>
</body>
</html>
index.html