给对象写的，顺便源码给大家分享一下
就是简单的html+css+js，不复杂
xin1.html
<!DOCTYPE html>
<html lang="zh-CN">
<head> <meta charset="UTF-8"> <title>写你自己的</title> <link rel="stylesheet" href="petal.css"><style> body { margin: 0; overflow: hidden; background: radial-gradient(circle at bottom, #ff89b5, #ffe0e5); display: flex; justify-content: center; align-items: center; position: relative; height: 100vh; } /* 心形动画 */ .heart { position: absolute; z-index: 10; /* 确保爱心在最上层 */ width: 150px; height: 135px; background: pink; transform: rotate(45deg); animation: heartbeat 1s infinite; } .heart::before, .heart::after { content: ""; position: absolute; width: 150px; height: 135px; background: pink; border-radius: 50%; } .heart::before { left: -75px; border-radius: 50% 0 0 50%; } .heart::after { top: -75px; border-radius: 50% 50% 0 0; } @keyframes heartbeat { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.1); } } /* 文字动画 */ .text { position: absolute; z-index: 11; top: 47%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-family: 'KaiTi', cursive; font-size: 48px; font-weight: bold; opacity: 0; animation: textFadeIn 4s forwards; text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); } @keyframes textFadeIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5);} 100% { opacity: 1; transform: translate(-50%, -50%) scale(1);} } /* 花瓣样式 */ .photo-display { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; z-index: 1; opacity: 0; animation: photoFadeIn 2s forwards; } .photo-display img { width: 50%; height: 100%; object-fit: cover; } @keyframes photoFadeIn { from { opacity: 0; } to { opacity: 1; } }.button { position: fixed; bottom: 10px; left: 10px; background-color: #FF69B4; color: white; border: none; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 10px 8px; cursor: pointer; border-radius: 12px; z-index: 15; opacity: 0.7; } .button:hover { opacity: 1; background-color: #FF1493; }
</style>
</head>
<body> <div class="heart"></div> <div class="text">随便写</div> <!--<audio id="bgm" src="简单爱.mp3" loop></audio> --> <!-- 此处为二张拼接的照片链接 <div class="photo-display"> <img src="photo/1.jpg" alt="欣怡1"> <img src="photo/2.jpg" alt="欣怡2"> </div> 这块的话是主页面的背景，大家看着调整--> <a href="message.html" class="button">查看留言</a> <script> // 创建飘落花瓣 const petalCount = 30; for (let i = 0; i < petalCount; i++) { createPetal(); } function createPetal() { let petal = document.createElement('div'); petal.classList.add('petal'); petal.style.left = Math.random() * 100 + 'vw'; petal.style.animationDuration = 5 + Math.random() * 5 + 's'; petal.style.animationDelay = Math.random() * 5 + 's'; petal.style.transform = 'translateX(0) rotate(' + Math.random() * 360 + 'deg)'; document.body.appendChild(petal); petal.addEventListener('animationend', () => { petal.remove(); createPetal(); }); } // 音乐和图片展示处理 const photoDisplay = document.querySelector('.photo-display'); function playAudioAndShowPhotos() { photoDisplay.style.opacity = '1'; // 显示图片 document.querySelector('.click-to-play').style.display = 'none'; document.removeEventListener('click', playAudioAndShowPhotos); } document.addEventListener('click', playAudioAndShowPhotos);
</script>
</body>
</html>
message.html
<!DOCTYPE html>
<html lang="zh-CN">
<head> <meta charset="UTF-8"> <title>写你的</title> <link rel="stylesheet" href="petal.css"><style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #fff0f5; font-family: 'KaiTi', cursive; color: #e75480; padding: 20px; box-sizing: border-box; text-shadow: 1px 1px 2px #ffa6c9; } .message-container { text-align: center; max-width: 600px; } .message-container h1 { font-size: 36px; margin-bottom: 20px; } .message-container p { font-size: 18px; line-height: 1.5; text-indent: 2em;}
</style>
</head>
<body> <div class="message-container"> <!--替换为你的内容--> </div><audio id="bgm" src="简单爱.mp3" loop></audio> <!--替换为你的内容--> <script> const petalCount = 30; for (let i = 0; i < petalCount; i++) { createPetal(); } function createPetal() { let petal = document.createElement('div'); petal.classList.add('petal'); petal.style.left = Math.random() * 100 + 'vw'; petal.style.animationDuration = 5 + Math.random() * 5 + 's'; petal.style.animationDelay = Math.random() * 5 + 's'; petal.style.transform = 'translateX(0) rotate(' + Math.random() * 360 + 'deg)'; document.body.appendChild(petal); petal.addEventListener('animationend', () => { petal.remove(); createPetal(); }); } const audio = document.getElementById('bgm'); const photoDisplay = document.querySelector('.photo-display'); function playAudioAndShowPhotos() { audio.play(); photoDisplay.style.opacity = '1'; // 显示图片 document.querySelector('.click-to-play').style.display = 'none'; document.removeEventListener('click', playAudioAndShowPhotos); localStorage.setItem('musicPlaying', 'true'); // 保存音乐状态 } function startMusic() { if (localStorage.getItem('musicPlaying') === 'true') { audio.play(); } } document.addEventListener('click', playAudioAndShowPhotos);
</script>
</body>
</html>
petal.css
.petal { position: fixed; top: -50px; background-image: url('photo/hua.png'); background-size: contain; background-repeat: no-repeat; width: 50px; height: 50px; opacity: 0.8; pointer-events: none; animation: fall linear infinite; z-index: 5;
}
@keyframes fall { 0% { transform: translateX(0) rotate(0deg); } 100% { transform: translateX(200px) translateY(100vh) rotate(360deg); }
}
飘落花瓣的原图（ai生成的）
大家把背景图扣一下，还有html里的内容替换一下就行
