|
|
楼主 |
发表于 2026-1-24 10:17:38
|
显示全部楼层
本帖最后由 宋白鸥M 于 2026-1-25 08:02 编辑 <br /><br /><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>歌词页</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
background: #fff;
font-family: "FangSong", "仿宋_GB2312", serif;
position: relative;
overflow-x: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px; /* 画框之间的间距 */
}
/* 居中歌词通用样式 */
.lyric {
font-size: 16px;
line-height: 2.4;
color: #333;
text-align: center;
position: relative;
z-index: 3; /* 确保文字在装饰上层 */
}
/* 1. 蓝调画框样式 */
.blue-frame {
border: 12px solid #E4F0FF;
border-radius: 18px;
padding: 25px 15px;
background: #fff;
max-width: 550px;
width: calc(100% - 40px);
margin-left: 0;
position: relative;
z-index: 2;
box-shadow: 0 2px 15px rgba(180, 210, 255, 0.2);
}
/* 左侧梅花装饰 */
.blue-frame::before {
content: "";
position: absolute;
left: -25px;
top: 20%;
width: 60px;
height: 120px;
background-image: url("https://img.icons8.com/fluency/96/000000/plum-blossom.png");
background-size: contain;
background-repeat: no-repeat;
z-index: 1;
}
/* 右侧兰花装饰 */
.blue-frame::after {
content: "";
position: absolute;
right: -25px;
bottom: 20%;
width: 60px;
height: 120px;
background-image: url("https://img.icons8.com/fluency/96/000000/orchid.png");
background-size: contain;
background-repeat: no-repeat;
z-index: 1;
}
/* 蝴蝶动画容器 */
.butterfly-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
/* 蝴蝶样式 + 动画 */
.butterfly {
position: absolute;
width: 30px;
height: 20px;
background-image: url("https://img.icons8.com/fluency/48/000000/butterfly.png");
background-size: contain;
background-repeat: no-repeat;
animation: fly 15s linear infinite;
}
/* 蝴蝶1动画 */
.butterfly1 {
top: 30%;
left: -10%;
animation-delay: 0s;
}
/* 蝴蝶2动画 */
.butterfly2 {
top: 60%;
left: -10%;
animation-delay: 5s;
}
/* 蝴蝶飞行动画 */
@keyframes fly {
0% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(200px, -50px) rotate(10deg);
}
50% {
transform: translate(400px, 30px) rotate(-10deg);
}
75% {
transform: translate(600px, -20px) rotate(5deg);
}
100% {
transform: translate(800px, 0) rotate(0deg);
}
}
</style>
</head>
<body>
<!-- 极简点击播放 -->
<script>
document.body.addEventListener('click', () => {
const audio = document.getElementById('audio');
audio && audio.play().catch(err => console.log('播放失败：', err));
});
</script>
<audio id="audio" preload="auto">
<source src="https://www.lizhi.fm/616408/3190237287581010950?u=4928046" type="audio/mpeg">
</audio>
<!-- 1. 蓝调画框 + 歌词 + 装饰 -->
<div class="blue-frame">
<!-- 蝴蝶容器 -->
<div class="butterfly-container">
<div class="butterfly butterfly1"></div>
<div class="butterfly butterfly2"></div>
</div>
<div class="lyric">
宋白鸥路过～<br>
留下一串脚印～<br>
嘻嘻嘻～
</div>
</div>
</body>
</html>
|
|
发表于 2026-1-24 20:58:18
