<!DOCTYPE html>

<html lang=”zh-CN”>

<head>

<meta charset=”UTF-8″>

<title>愚人节快乐 🤪</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: “Microsoft YaHei”, sans-serif;

}

body {

background: #f8f9fa;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

gap: 30px;

}

.title {

font-size: 28px;

color: #ff4081;

text-shadow: 2px 2px 4px rgba(0,0,0,0.1);

}

.prank-btn {

padding: 16px 40px;

font-size: 20px;

background: #ff5722;

color: white;

border: none;

border-radius: 12px;

cursor: pointer;

box-shadow: 0 6px 0 #e64a19;

transition: all 0.15s;

}

.prank-btn:active {

transform: translateY(4px);

box-shadow: 0 2px 0 #e64a19;

}

</style>

</head>

<body>

<h1 class=”title”>愚人节惊喜礼包</h1>

<button class=”prank-btn” id=”prankBtn”>点击领取惊喜</button>

 

<script>

const btn = document.getElementById(‘prankBtn’);

btn.addEventListener(‘click’, () => {

// 整蛊弹窗

alert(‘哈哈哈哈！你被愚人节整蛊啦～😈’);

alert(‘没错！这就是全部惊喜！’);

alert(‘愚人节快乐呀！’);

 

// 页面轻微抖动

document.body.style.transform = ‘translate(3px, 3px)’;

setTimeout(() => {

document.body.style.transform = ”;

            }, 100);

});

</script>

</body>

</html>