歌曲：黄玫瑰（播放中……）
本帖最后由 宋白鸥M 于 2026-1-25 15:00 编辑 <br /><br /><!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黄玫瑰（花瓣飘落）</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
background: #fff;
font-family: "楷体", sans-serif;
position: relative;
overflow-x: hidden;
}
/* 1. 桃花花瓣（柔和飘落） */
.peach-blossom {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
/* 2. 粉色画框（柔和样式） */
.pink-frame {
border: 12px solid #FFE4E9;
border-radius: 18px;
padding: 25px 15px;
background: #fff;
max-width: 550px;
margin: 0 auto;
position: relative;
z-index: 3;
box-shadow: 0 2px 10px rgba(255, 180, 193, 0.15);
}
/* 3. 居中歌词 */
.lyric {
font-size: 16px;
line-height: 2.4;
color: #333;
text-align: center;
margin: 0;
}
/* 4. 隐藏播放器 */
embed {
display: none;
}
/* 5. 提示文字 */
.tip {
text-align: center;
margin-top: 20px;
color: #D87093;
font-size: 14px;
}
/* 花瓣飘落动画（更柔和） */
@keyframes blossomFall {
0% {
transform: translateY(-20px) rotate(0deg) scale(1);
opacity: 1;
}
100% {
transform: translateY(calc(100vh + 20px)) rotate(180deg) scale(0.8);
opacity: 0;
}
}
</style>
</head>
<body>
<!-- 1. 花瓣容器 -->
<div class="peach-blossom" id="peachBlossom"></div>
<!-- 2. 画框+歌词 -->
<div class="pink-frame">
<div class="lyric">
黄玫瑰 别落泪<br>
所有的花儿你最美<br>
受了伤 别伤悲<br>
别让泪珠湿花蕊<br>
别让我看见你的伤悲<br>
我会为她心碎<br>
别问自己对不对<br>
心中有爱就很美<br>
即使告别了春天阳光<br>
你依然要开放<br>
别害怕 别犯傻<br>
别轻易剪去长发<br>
我会站在你的身旁<br>
给你依靠的肩膀<br>
别说话 微笑吧<br>
回头是灿烂的夏<br>
我默默地祝福你<br>
感觉到了吗<br>
海角 天涯<br>
哪里不是你的家<br>
别怕啊 别傻啊<br>
哪里都能开花<br>
黄玫瑰 别落泪<br>
所有的花儿你最美<br>
受了伤 别伤悲<br>
别让泪珠湿花蕊<br>
你应该知道你是那样美<br>
谁都会为你心醉<br>
别再抱怨爱太累<br>
真爱能有几回<br>
即使告别了春天阳光<br>
你依然要开放<br>
别害怕 别犯傻<br>
别轻易剪去长发<br>
我会站在你的身旁<br>
给你依靠的肩膀<br>
别说话 微笑吧<br>
回头是灿烂的夏<br>
我默默地祝福你<br>
感觉到了吗<br>
海角 天涯<br>
哪里不是你的家<br>
别怕啊 别傻啊<br>
哪里都能开花
</div>
<!-- 隐藏播放器 -->
<embed
src="https://www.lizhi.fm/616408/3190237287581010950?u=4928046"
type="audio/mpeg"
autoplay="true"
muted="false"
controller="false"
</div>
<script>
// 生成柔和花瓣
function createPeachBlossom() {
const container = document.getElementById('peachBlossom');
const blossom = document.createElement('div');
const size = Math.random() * 10 + 5;
const color = `rgba(255, ${Math.floor(Math.random() * 70 + 170)}, ${Math.floor(Math.random() * 70 + 170)}, ${Math.random() * 0.4 + 0.5})`;
const fallTime = Math.random() * 10 + 15;
blossom.style.cssText = `
position: absolute;
width: ${size}px;
height: ${size}px;
background-color: ${color};
border-radius: 50% 30%;
top: -20px;
left: ${Math.random() * 90 + 5}%;
animation: blossomFall ${fallTime}s linear infinite;
`;
container.appendChild(blossom);
setTimeout(() => blossom.remove(), fallTime * 1000);
}
setInterval(createPeachBlossom, 1200);
for (let i = 0; i < 10; i++) createPeachBlossom();
// 点击播放
document.body.addEventListener('click', () => {
const audio = document.querySelector('embed');
audio && !audio.playing && audio.play();
});
</script>
</body>
</html>
研究研究就会了，慢慢来 叶青漪M 发表于 2026-1-19 15:14
得下载软件吧！边框我不会，只能慢慢研究吧！早晚学会。世上无难事，只怕有心人。
嗯嗯 宋白鸥M 发表于 2026-1-19 15:11
我想搞画框上有枝桠还有花瓣飘落的，结果成了左右两条蚯蚓了，唉～～我肯定又写错html代码了，再去研究
得下载软件吧！边框我不会，只能慢慢研究吧！早晚学会。世上无难事，只怕有心人。 叶青漪M 发表于 2026-1-19 14:45
我才学会这种，你那个插入我也不会，还要研究研究。
我想搞画框上有枝桠还有花瓣飘落的，结果成了左右两条蚯蚓了，唉～～我肯定又写错html代码了，再去研究 叶青漪M 发表于 2026-1-19 14:45
我才学会这种，你那个插入我也不会，还要研究研究。
嗯嗯，再接着研究，嘻嘻…… 宋白鸥M 发表于 2026-1-19 13:16
问好姐姐，你是咋整的？为啥我还是弄不出来
我才学会这种，你那个插入我也不会，还要研究研究。 叶青漪M 发表于 2026-1-19 13:33
把你那个删了吧。小四
谢谢，我已经删了，又重新修改了一下代码，发现还是无法播放音频
叶家铃M 发表于 2026-1-19 14:13
这歌我喜欢
谢谢哟，同屏欢乐 这歌我喜欢
页:
[1]
2