|
|
发表于 2026-1-19 16:43:35
|
显示全部楼层
本帖最后由 宋白鸥M 于 2026-1-19 16:55 编辑 <br /><br /><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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，改为左外边距控制间距 */
margin-left: 20px;
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>
有枯藤老树昏鸦的感觉
</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>
|
|
楼主
发表于 2026-1-19 14:47:43
