给对象写的，顺便源码给大家分享一下
就是简单的html+css+js，不复杂
xin1.html
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
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
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里的内容替换一下就行