给对象写的，顺便源码给大家分享一下
就是简单的html+css+js，不复杂
xin1.html
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>写你自己的</title><linkrel="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><divclass="heart"></div><divclass="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>
这块的话是主页面的背景，大家看着调整
--><ahref="message.html"class="button">查看留言</a><script>// 创建飘落花瓣 const petalCount =30;for(let i =0; i < petalCount; i++){createPetal();}functioncreatePetal(){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');functionplayAudioAndShowPhotos(){
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
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>写你的</title><linkrel="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><divclass="message-container"><!--替换为你的内容--></div><audioid="bgm"src="简单爱.mp3"loop></audio><!--替换为你的内容--><script>const petalCount =30;for(let i =0; i < petalCount; i++){createPetal();}functioncreatePetal(){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');functionplayAudioAndShowPhotos(){
audio.play();
photoDisplay.style.opacity ='1';// 显示图片
document.querySelector('.click-to-play').style.display ='none';
document.removeEventListener('click', playAudioAndShowPhotos);
localStorage.setItem('musicPlaying','true');// 保存音乐状态 }functionstartMusic(){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里的内容替换一下就行
本文转载自: https://blog.csdn.net/wxdzuishaui/article/details/143273834
版权归原作者 无限大. 所有， 如有侵权，请联系我们删除。
版权归原作者 无限大. 所有， 如有侵权，请联系我们删除。