落日留恋的地方

杨帆发表于 2026-9-14 18:27

本帖最后由杨帆于 2026-9-14 18:49 编辑 <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>
@import url("https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+QingKe+HuangYou&display=swap");
#papa { margin:0; width: 100%;height: 750px;background: #ccc url(https://pic1.imgdb.cn/item/6a301d59b755a1449d6a3b97.jpg) no-repeat center/cover; box-shadow: 2px 2px 8px #000; overflow: hidden; user-select: none; -webkit-user-select: none;z-index: 1; position: relative;}
#reflect-right { position:absolute;width:100%;height:750px;z-index:2; margin: 0px 0px; -webkit-box-reflect:left;inset:0;object-fit:cover; }
.lrc { z-index: 10; position: absolute; top: 20%; left: 50%; transform:translateX(-50%);width: 650px; height: 420px; overflow: hidden; }
.lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color:#FFFF00; font: bold 2.5em 'Long Cang','ZCOOL KuaiLe','YouYuan', sans-serif; list-style-type: none; text-align: center; display: block; padding: 0 10px; height: 60px; line-height: 50px; margin: 0 auto; cursor: pointer; }
.lrc #ul li.active { transform: scale(1.15); color:#33CC33; font-weight: 650;text-shadow: 0 0 8px #ff666688; }
.vid{position:absolute;top:-10%;left:-10%;width:120%;height:120%;object-fit:cover;mix-blend-mode:screen;opacity:0.6;z-index:1;pointer-events:none;}
#bfq{position: absolute;display: grid;place-items: center;width:200px;height: 80px;overflow: hidden; z-index: 10;left: 75%; top:90%;}
.start{color: #FFFF99;position: absolute; top:12px;left: 0px;}
.end{color: #FFFF99;position: absolute;top:12px; right: 0px;}
#btn{position: absolute;background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover;width:50px;height: 50px;left: 50%; top:0%;transform:translateX(-50%);z-index: 12;cursor: pointer;}
.title-wrapper { position: absolute; width: 60px;height:90%;left: 5%; top:60%;transform:translateY(-50%); z-index: 10; transform‑origin:center center; padding: 10px 10px; background: transparent; pointer-events: none; }
.song-title { font-size: 3.5em; font-weight: 600;white-space: nowrap; font-family: 'ZCOOL KuaiLe','STKaiti', 'KaiTi', 'Georgia', serif; letter-spacing: 12px; writing-mode: vertical-rl; text-orientation: upright; text-align: center; background: linear-gradient(180deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00bfff, #ff00ff, #ff0000); background-size: 100% 500%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbowFlow 6s linear infinite; text-shadow: 0 0 30px rgba(0, 0, 0, 0.6); line-height: 1; }
.song-title.paused { animation-play-state: paused; }
@keyframes rainbowFlow { 0% { background-position: 50%0%; } 100% { background-position: 50% 100%; } }
#fullscreen{ position:absolute; top:30px; right:30px; font:normal 1.5em 楷体; color:#fff; text-shadow:0 0 3px #000; opacity:0; cursor: pointer; pointer-events: auto; z-index:15;}
#fullscreen:hover{font-style:italic;}
#papa:hover #fullscreen {opacity: 0.9; }
#papa:fullscreen #reflect-right{ width:100vw; height:100vh; margin:0;}
</style>
</head>
<body>
<div style="position: absolute; left:0px;width:100%;margin-top:80px;">
<div id="papa">
<div class="title-wrapper"> <div class="song-title">落日留恋的地方</div> </div>
<video class ="vid" src="https://video-qn.51miz.com/preview/video/00/00/13/09/V-130942-864B05CF.mp4" autoplay loop preload="auto" playsinline muted></video>
<marquee id="roll" behavior="scroll" scrollamount="8" height="100%">
<img src="https://pic1.imgdb.cn/item/6a301d59b755a1449d6a3b97.jpg" id="reflect-right">
</marquee>
<div id="bfq">
<span class="start">00:00</span><p id="btn"></p><span class="end">00:00</span>
</div>
<div class="lrc">
<ul id="ul"></ul>
</div>
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=3389032274.mp3" loop preload="auto" playsinline ></audio>
</div>
</div>
<div style="height:880px;"></div>
<script>
var papa = document.getElementById('papa');
var audio = document.getElementById('aud');
var roll= document.getElementById('roll');
var bfq = document.getElementById('bfq');
var btn = document.getElementById('btn');
var vid = document.querySelector('.vid');
var titleEl = document.querySelector('.song-title');
var fullscreen = document.getElementById('fullscreen');
btn.onclick = function() {
if (audio.paused) {
audio.play().catch(err=>{});vid.play().catch(err=>{});
roll.start();btn.title="暂停";titleEl.classList.remove('paused');
btn.style.background = 'url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover';
} else {
audio.pause();vid.pause();
roll.stop();btn.title="播放";titleEl.classList.add('paused');
btn.style.background = 'url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover';
}
};
const start = document.querySelector('.start')
const end= document.querySelector('.end')
function conversion (value) {
let minute = Math.floor(value / 60)
minute = minute.toString().length === 1 ? ('0' + minute) : minute
let second = Math.round(value % 60)
second = second.toString().length === 1 ? ('0' + second) : second
return `${minute}:${second}`
}
audio.onloadedmetadata = function () {
end.innerHTML = conversion(audio.duration)
start.innerHTML = conversion(audio.currentTime)
}
let lrc = `落日留恋的地方
作词：铃花花
作曲：铃花花
演唱：铃花花

呼伦湖含着斜阳
候鸟衔来半片暮色
马头琴轻摇着金色光阴
锡林郭勒成了歌的故乡
科尔沁草原绿了又黄
云影低垂风也很凉
宝格达乌拉神山沉默不语
这里是落日最美的地方
你走后晚霞也变得苍茫
草原姑娘从不掉眼泪
只把思念藏进草场
心随云雁划向远方
科尔沁草原绿了又黄
云影低垂风也很凉
宝格达乌拉神山沉默不语
这里是落日最美的地方
你走后晚霞也变得苍茫
草原姑娘从不掉眼泪
只把思念藏进草场
心随云雁划向远方
心随云雁划向远方
`;
let lrcArr = lrc.split('\n');
let result = [];
var ul = document.querySelector("#ul");
var container = document.querySelector(".lrc");
for (let i = 0; i < lrcArr.length; i++) {
var lrcData = lrcArr.split(']');
if (lrcData.length < 2) continue;
var lrcTime = lrcData.substring(1);
var obj = { time: parseTime(lrcTime), word: lrcData.trim() }
result.push(obj);
}
function parseTime(lrcTime) {
let lrcTimeArr = lrcTime.split(":");
return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
}
function getCurrentLrcInfo() {
let time = audio.currentTime;
let currIndex = -1;
let nextTime = Infinity;
for (let i = 0; i < result.length; i++) {
if (result.time > time) {
   nextTime = result.time;
   break;
}
currIndex = i;
}
return {currIndex, nextTime};
}
function createElements() {
let fragment = document.createDocumentFragment();
for (let i = 0; i < result.length; i++) {
let li = document.createElement("li");
li.innerText = result.word;
li.addEventListener("click", function () {
   audio.currentTime = result.time;
   setOffset();
});
fragment.appendChild(li);
}
ul.appendChild(fragment);
}
createElements();
let containerHeight = container.clientHeight;
let liHeight = ul.children?.clientHeight || 50;
let minOffset = 0;
let maxOffset = ul.clientHeight - containerHeight;
let lastIndex = -1;
function setOffset() {
const {currIndex, nextTime} = getCurrentLrcInfo();
if (currIndex < 0) return;
const curr = result;
const liHeight = ul.children?.clientHeight || 50;
let progress = 0;
if(nextTime !== Infinity){
const duration = nextTime - curr.time;
progress = (audio.currentTime - curr.time) / duration;
}
let baseOffset = liHeight * currIndex - containerHeight / 2 + liHeight / 2;
let offset = baseOffset + liHeight * progress;
offset = Math.max(minOffset, Math.min(offset, maxOffset));
ul.style.transform = `translateY(${-offset}px)`;
if(currIndex !== lastIndex){
lastIndex = currIndex;
ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
if (currIndex < ul.children.length) {
   ul.children.classList.add('active');
}
}
}
audio.addEventListener("timeupdate", setOffset);
audio.addEventListener("timeupdate", ()=>{
start.innerHTML = conversion(audio.currentTime);
})
papa.addEventListener('contextmenu', e => e.preventDefault());
papa.addEventListener('dragstart', e => e.preventDefault());
papa.addEventListener('selectstart', e => e.preventDefault());
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
if(papa.requestFullscreen) papa.requestFullscreen();
else if(papa.webkitRequestFullscreen) papa.webkitRequestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
if(document.exitFullscreen) document.exitFullscreen();
else if(document.webkitExitFullscreen) document.webkitExitFullscreen();
}
fs = !fs;
};
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
if (!audio.paused) audio.pause();
} else {
if (audio.paused && !audio.ended) audio.play().catch(()=>{});
}
});
setTimeout(function() {audio.play().catch(err=>{});}, 500);
</script>
</body>
</html>

杨帆发表于 2026-9-14 18:53

本帖最后由杨帆于 2026-9-14 18:57 编辑

代码来自了了子老师、万顷湖老师分享作品，素材来自亚伦老师分享作品，在此一并表示感谢{:4_190:}

霜染枫丹 发表于 2026-9-14 20:04

杨帆晚上好~~

我拍过呼伦湖，风光挺好的。看帖很惬意，赞佩！{:4_204:}{:4_190:}

夕阳黄昏 发表于 2026-9-14 20:25

欣赏美帖！赞！

杨帆发表于 2026-9-14 20:26

本帖最后由杨帆于 2026-9-14 20:31 编辑

霜染枫丹发表于 2026-9-14 20:04
杨帆晚上好~~

我拍过呼伦湖，风光挺好的。看帖很惬意，赞佩！
这个背景图是我顺便找到的一张洞庭湖照片。

好啊，枫丹老师摄影水平很高，方便时请发个呼伦湖的摄影作品呗{:4_187:}

杨帆发表于 2026-9-14 20:29

夕阳黄昏发表于 2026-9-14 20:25
欣赏美帖！赞！

谢谢夕阳老师临帖鼓励，祝开心{:4_190:}

红影发表于 2026-9-15 10:32

很漂亮的制作，欣赏扬帆好帖{:4_199:}

偶然~ 发表于 2026-9-16 17:17

来欣赏杨帆老师佳作

偶然~ 发表于 2026-9-16 17:17

制作大气磅礴

杨帆发表于 2026-9-16 18:32

红影发表于 2026-9-15 10:32
很漂亮的制作，欣赏扬帆好帖

谢谢影子鼓励，祝开心{:4_204:}

杨帆发表于 2026-9-16 18:33

偶然~ 发表于 2026-9-16 17:17
来欣赏杨帆老师佳作

问好偶然~，祝兄弟开心{:4_190:}

偶然~ 发表于 2026-9-16 18:38

杨帆发表于 2026-9-16 18:33
问好偶然~，祝兄弟开心

杨帆老师健康快乐

页: [1]

花潮论坛's Archiver

落日留恋的地方