<!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;
padding: 50px;
background-color: #ffb6c1;
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
flex-direction: column;
}
@keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.7;
}
70% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.7;
}
}
.message {
display: none;
font-size: 2em;
color: #ffffff;
}
.visible {
display: block;
animation: pulse 2s infinite;
}
</style>
</head>
<body>
<h1>点击我，让我们一起穿越时间与空间！</h1>
<p class="message" id="message1">爱在虚空中绽放，跨越轮回的界限。</p>
<p class="message" id="message2">爱涌动，万物和谐共鸣。</p>
<p class="message" id="message3">情人节，多维空间的挚爱与祝福。</p>
<audio id="myAudio">
<source src="path_to_your_audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
let hasInteracted = false;
function playSound() {
const sound = document.getElementById('myAudio');
sound.play();
}
function displayMessages() {
document.getElementById('message1').classList.add('visible');
setTimeout(() => {
document.getElementById('message2').classList.add('visible');
}, 2000);
setTimeout(() => {
document.getElementById('message3').classList.add('visible');
}, 4000);
}
document.body.addEventListener('click', function() {
if (!hasInteracted) {
hasInteracted = true;
playSound();
displayMessages();
// 如果设备支持，这里可以尝试触发触觉反馈
if (navigator.vibrate) {
// 500ms的振动
navigator.vibrate(500);
}
}
});
</script>
</body>
</html>
