清歌漫谷
本帖最后由 杨帆 于 2026-8-9 00:35 编辑 <br /><br /><!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<title>清歌漫谷</title>
<style>
.papa{ position: relative; display: grid; place-items: center;margin: 30px 0; width: 1280px; height: 750px; left: calc(50% - 81px); transform: translateX(-50%);box-shadow: 3px 3px 6px gray; overflow: hidden; user-select:none; z-index: 1; }
.papa::before, .papa::after { position: absolute; content: ''; inset: 0; background: url('https://pic1.imgdb.cn/item/6a301d59b755a1449d6a3b97.jpg') no-repeat 0 0 / 100% 100%; z-index: -2; }
.papa::before { background-position: var(--begin1) 0; }
.papa::after { transform: scale(-1, 1); background-position: var(--begin2) 0; }
.testImg {position: absolute; inset: 0;width:100%;height:100%;}
.photo { position: absolute; width: 100%; height: 100%; z-index: 2; top:0px; left:0px; filter:contrast(120%) brightness(100%); opacity: 0; animation: round 48s infinite var(--animation-delay) linear;--animation-delay:0s;}
.photo:nth-child(2) { --animation-delay: -6s; }
.photo:nth-child(3) { --animation-delay: -12s; }
.photo:nth-child(4) { --animation-delay: -18s; }
.photo:nth-child(5) { --animation-delay: -24s; }
.photo:nth-child(6) { --animation-delay: -30s; }
.photo:nth-child(7) { --animation-delay: -36s; }
.photo:nth-child(8) { --animation-delay: -42s; }
.stop .photo {animation-play-state: paused;}
.containers{ width: 100%; position: absolute; left:0; top:0;z-index: 2;}
.containers .lrc{ width: 100%; height: 180px; position: absolute;z-index: 3; overflow: hidden; top:120px;}
.containers .lrc #ullrc{ width: 100%; padding: 0; list-style: none; margin: 0;}
.containers .lrc #ullrc li{ height: 100px; line-height: 100px; font-family:'Long Cang','ZCOOL KuaiLe','Ma Shan Zheng','华文琥珀',"悟空大字库",sans-serif,STLiti,cursive; font-size: 40px; color: #000078; font-weight:bold; transition: .3s all ease; text-align:center; display: block; width: 100%; filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0); margin: 0 auto;}
.lrc #ullrc li.active{ font-size:clamp(2em,3.5vw,5em);color:#999933; text-align:center; font-weight: normal; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(135deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%); background-position: -1200px 0; filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px 0); -webkit-animation:loop 3s linear 1;}
@-webkit-keyframes loop{
0%{background-position: -1200px 0;}
100%{background-position: -0 0;}
}
@keyframes loop{
0%{background-position: -1200px 0;}
100%{background-position: 0 0;}
}
@keyframes round{
0% {
opacity: 1;clip-path:polygon(0 0, 50% 50%, 100% 100%, 50% 50%);
transform:translate(0%,0%)scale(1);}
6% {
opacity: 1;clip-path:polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
transform:translate(0%,0%)scale(1);}
12% {
opacity: 1;clip-path:polygon(0 100%, 0 0, 100% 0, 100% 100%);
transform:translate(0%,0%)scale(1);}
18% {
opacity: 0;clip-path:polygon(0 100%, 0 0, 100% 0, 100% 100%);
transform:translate(0%,0%)scale(3);}
}
.vid{ position: absolute; z-index:18; width:500px;height:500px;}
.vid1 {position:absolute;z-index:1;pointer-events:none;object-fit:cover;object-position:center;left:-10%;top:-10%;width:120%;height:120%;mask:linear-gradient(to bottom,red 35%,transparent 58%);-webkit-mask:linear-gradient(to bottom,red 35%,transparent 58%);}
#statusDisplay{position:absolute;z-index:3;font-size:1.5em;font-weight:50;left:5%;top:5%;color:#fff;}
#fullscreen{position:absolute;top:30px;right:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:8;}
#fullscreen:hover{font-style:italic;}
#msvg {display:block; position:absolute; z-index: 2;width:100%;height:auto}
#msvg text { font: bold 15px Sans-serif; text-anchor: middle; fill:#FFFF99; }
</style>
</head>
<body>
<div id="papa" class="papa">
<audio id="MusicPlayer" src="https://i.uik.cc/view.php/5b8df361e2b522318317fdea2a3cc63e.mp3" autoplay preload="auto" playsinline loop></audio>
<span id="fullscreen">全屏欣赏</span>
<div id="statusDisplay">加载中……</div>
<video class="vid1" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1337588768.mp4" loop preload="auto" playsinline autoplay muted></video>
<svg id="msvg" viewBox="-200 -100 400 200" xmlns="http://www.w3.org/2000/svg">
<path id="tp" d="M -180 100 Q 0 -100,180 100" fill="none" stroke="none" />
<text>
<textPath href="#tp" > 清歌漫谷 <animate id="ani" attributeName="startOffset" from="120%" to="-20%" dur="8s" repeatCount="indefinite" fill="freeze" />
</textPath>
</text>
</svg>
<div class="testImg">
<img class='photo' src="https://638183.freep.cn/638183/t22/webp/qqup.webp" alt="" />
<img class='photo' src="https://638183.freep.cn/638183/t23/3/lkp.jpg.webp" alt="" />
<img class='photo' src="https://pic1.imgdb.cn/item/6880c95958cb8da5c8d0e959.jpg" alt="" />
<img class='photo' src="https://pic1.imgdb.cn/item/68a27fda58cb8da5c82bb641.jpg" alt="" />
<img class='photo' src="https://p3-search.byteimg.com/obj/labis/304e1ca4039eb52e39c0e5ea9d975fa5.jpg" alt="" />
<img class='photo' src="https://p3-search.byteimg.com/obj/labis/1eb956fd56de8de45f9075719e6b1011.jpg" alt="" />
<img class='photo' src="https://pic1.imgdb.cn/item/68a27fb558cb8da5c82bb622.jpg" alt="" />
<img class='photo' src="https://ff.xiaoqiaodali.top:5401/i/2026/08/04/6a71c83cecd4a.jpg" alt="" />
</div>
<div class="containers">
<div class="lrc">
<ul id="ullrc"></ul>
</div>
<div class="video-wrap" style="left:calc(50% - 250px);transform: translateX(-50%); position: absolute; top: 200px">
<video class="vid" src="https://media-volc.jianpian.info/2769333/article/20260627/5b6f1540b4384ba59356820077d57c2d.mp4"
style="mask: radial-gradient(ellipse 50% 30% at 50% 50%, black 50%,transparent 90%);-webkit-mask: radial-gradient(ellipse 50% 30% at 50% 50%, black 50%,transparent 90%); cursor:pointer;" autoplay loop muted title="暂停"></video>
</div>
</div>
</div>
<script >
var lrc = `清歌漫谷
清歌漫谷
词曲：墨荷焚心
演唱：墨荷焚心
山路弯弯像绸带
我追着晨雾往前迈
野花开在石缝里
风一吹就对我笑开
哎哟山歌轻轻飘
哎哟脚步也会跳
背上的竹篓晃一晃
把春天装得刚刚好
山那边有谁在等
溪水替我先开口
我把心事放进风里
一路唱着往前走
哎哟山风来啦
哎哟花也醒啦
你看那云边的太阳
正把笑脸挂上山岗
哎哟一起唱呀
哎哟慢慢摇呀
把这好日子唱成歌
唱到山谷都回响
竹林深处有炊烟
阿婆喊我去尝鲜
一碗糯米一口甜
暖到心尖最里面
哎哟铜铃轻轻响
哎哟溪水叮当唱
我和姑娘并肩走
裙角沾了满路香
山那边有谁在等
溪水替我先开口
我把心事放进风里
一路唱着往前走
哎哟山风来啦
哎哟花也醒啦
你看那云边的太阳
正把笑脸挂上山岗
哎哟一起唱呀
哎哟慢慢摇呀
把这好日子唱成歌
唱到山谷都回响
我走过晨露和坡坎
也走进你的目光
若你听见这段旋律
就跟着我轻轻晃
哎哟别怕路长
哎哟心不慌
前头那片最亮的山
正等我们去歌唱
哎哟山风来啦
哎哟花也醒啦
你看那云边的太阳
正把笑脸挂上山岗
哎哟一起唱呀
哎哟慢慢摇呀
把这好日子唱成歌
唱到山谷都回响
唱到山谷都回响`;
function getLrcArray() {
var parts = lrc.split("\n");
let result = [];
for (let index = 0; index < parts.length; index++) {
let line = parts.trim();
if(!line) continue;
let obj = getLrcObj(line);
if(obj) result.push(obj);
}
return result;
function getLrcObj(content) {
let timeEndPos = content.indexOf(']');
if(timeEndPos === -1) return null;
let timeStr = content.slice(1, timeEndPos);
let words = content.slice(timeEndPos + 1).trim();
let minSec = timeStr.split(":");
if(minSec.length!==2) return null;
let min = parseFloat(minSec);
let sec = parseFloat(minSec);
let totalSeconds = min * 60 + sec;
return{
seconds: totalSeconds,
words: words
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
document.getElementById("ullrc").appendChild(li);
}
}
inputLrc();
var turn = 0;
function getLrcIndex(currentSec){
const target = currentSec + turn;
let low = 0;
let high = lrcArray.length - 1;
let resultIdx = -1;
while(low <= high){
const mid = Math.floor((low + high)/2);
const itemSec = lrcArray.seconds;
if(itemSec <= target){
resultIdx = mid;
low = mid + 1;
}else{
high = mid -1;
}
}
return resultIdx;
}
const audio = document.getElementById("MusicPlayer");
const statusDisplay = document.getElementById('statusDisplay');
const papa = document.getElementById('papa');
const vids = document.querySelectorAll('video');
const vid = document.querySelector('.vid');
function formatTime(seconds) {
const abs = Math.abs(seconds);
const m = Math.floor(abs/60);
const s = Math.floor(abs%60);
return `${seconds<0?'-':''}${m}:${s<10?'0':''}${s}`;
}
function renderPlayTime() {
if(!audio.duration) return;
const rem = audio.duration - audio.currentTime;
statusDisplay.innerHTML = `<span style="color:#FFFF00">播放中：</span><span style="color:#00CC00">${formatTime(-(audio.duration-audio.currentTime))}</span>`;
}
function setPosition() {
var index = getLrcIndex(audio.currentTime);
if (index === -1) {
return;
}
var lrc_li_height = 100, lrc_ul_height = 80;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0;
}
document.getElementById("ullrc").style.marginTop = -top + "px";
var activeLi = document.getElementById("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
document.getElementById("ullrc").children.classList.add("active");
const currentTime = audio.currentTime;
if(!audio.paused && audio.duration) renderPlayTime();
}
const svg = document.getElementById('msvg');
const fullscreen = document.getElementById('fullscreen');
const testImg = document.querySelector('.testImg');
audio.ontimeupdate = setPosition;
audio.addEventListener('playing', () => {
startScroll();
testImg.classList.remove('stop');vids.forEach(vid => vid.play());
});
audio.addEventListener('pause', () => {
stopScroll();
testImg.classList.add('stop');vids.forEach(vid => vid.pause());
});
vid.onclick = () => {
if(audio.paused){
svg.unpauseAnimations();vid.title="暂停";audio.play();startScroll();
}else{
svg.pauseAnimations();statusDisplay.textContent = '已暂停';vid.title="播放";audio.pause();stopScroll();
}
};
var raf = null;
var begin1 = 0, begin2 = 0, speed = 0.25;
var isAnimating = false;
function stopScroll() {
if (raf) {
cancelAnimationFrame(raf);
raf = null;
}
isAnimating = false;
}
function moving() {
var ww = papa.offsetWidth;
begin1 += speed;
if (speed > 0) {
if (begin1 >= ww) begin1 = -ww;
} else {
if (begin1 <= -ww) begin1 = ww;
}
begin2 = begin1 >= 0
? -1 * (begin1 - ww + 1)
: -1 * (begin1 + ww - 1);
papa.style.setProperty('--begin1', begin1 + 'px');
papa.style.setProperty('--begin2', begin2 + 'px');
if (!audio.paused) {
raf = requestAnimationFrame(moving);
} else {
stopScroll();
}
}
function startScroll() {
if (isAnimating) return;
isAnimating = true;
moving();
}
window.addEventListener('resize', function () {
stopScroll();
if (!audio.paused) {
startScroll();
}
});
let fs = true,fsTimer;
fullscreen.onclick = () => {
if(fs){
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
}else{
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => {
fullscreen.style.opacity = '0';
}, 3000);
});
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('papa').addEventListener(type, e => e.preventDefault())
);
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
if (!audio.paused) audio.pause();
vids.forEach(v => v.pause());
} else {
if (audio.paused && !audio.ended) audio.play().catch(()=>{});
vids.forEach(v => v.play().catch(()=>{}));
}
});
</script>
</body>
</html> 欣赏杨帆带来的精彩的音画。{:4_187:} 画面特效好棒，歌曲好听。太棒啦！{:4_204:} 好像表情图有点变形了。 字幕设计真漂亮，为整个作品增色不少。问好杨帆。 漂亮的制作。好像有一张向日葵的背景图还是枫丹帖子里的呢。{:4_204:}
歌曲好听，轮播图图制作漂亮。好像代码有点问题，让勋章和表情都有点变形呢。 梦江南 发表于 2026-8-7 13:14
好像表情图有点变形了。
是，终于鼓捣好了，谢谢江南鼓励{:4_204:} 梦油 发表于 2026-8-7 14:54
字幕设计真漂亮，为整个作品增色不少。问好杨帆。
谢谢梦兄鼓励，这个是马老师的代码，在此表示感谢{:4_190:} 杨帆 发表于 2026-8-7 16:32
谢谢梦兄鼓励，这个是马老师的代码，在此表示感谢
你们都是能人。 红影 发表于 2026-8-7 16:24
漂亮的制作。好像有一张向日葵的背景图还是枫丹帖子里的呢。
歌曲好听，轮播图图制作漂亮。好像 ...
是，向日葵图片来自枫丹老师分享作品，轮播图代码来自申木老师分享作品，在此表示感谢{:4_190:}
呵呵，鼓捣许久，终于使得当前代码干净且安全，不会影响论坛图标。谢谢影子鼓励~{:4_204:} 梦油 发表于 2026-8-7 16:38
你们都是能人。
我之前对代码接触并不多，现在是兴趣所致跟老师学习鼓捣着玩呢，祝梦兄康乐天天{:4_190:} 杨帆 发表于 2026-8-7 16:29
是，终于鼓捣好了，谢谢江南鼓励
现在正常了，辛苦了！{:4_204:} 杨帆 发表于 2026-8-7 16:48
我之前对代码接触并不多，现在是兴趣所致跟老师学习鼓捣着玩呢，祝梦兄康乐天天
你学得快，做得好。 梦油 发表于 2026-8-7 17:45
你学得快，做得好。
谢谢梦兄支持与鼓励，祝开心{:4_180:} 梦江南 发表于 2026-8-7 17:35
现在正常了，辛苦了！
排查问题费劲也挺有趣呢，谢谢江南关注与鼓励，祝开心{:4_204:} 问好扬帆~~我也是特别喜欢这首歌，您的制作技术性强，赏心悦目！赞佩！祝立秋快乐~~{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-8-7 20:24
问好扬帆~~我也是特别喜欢这首歌，您的制作技术性强，赏心悦目！赞佩！祝立秋快乐~~
鼓捣着玩呢，谢谢枫丹老师的美图与鼓励，祝立秋快乐{:4_187:} 杨帆 发表于 2026-8-7 16:42
是，向日葵图片来自枫丹老师分享作品，轮播图代码来自申木老师分享作品，在此表示感谢
呵呵 ...
嗯嗯，杨帆辛苦了{:4_187:} 红影 发表于 2026-8-7 22:41
嗯嗯，杨帆辛苦了
鼓捣着玩呢，还谈不上辛苦，谢谢影子关注与鼓励{:4_204:} 杨帆 发表于 2026-8-7 23:01
鼓捣着玩呢，还谈不上辛苦，谢谢影子关注与鼓励
很漂亮的图形变换，这个制作还是很美的{:4_187:}
页:
[1]
2