末班车（R&B 版）

朵拉发表于 2026-5-3 14:46

本帖最后由朵拉于 2026-5-3 14:54 编辑 <br /><br /><style>
   #bj {
         position: relative;
         width: 580px;
         height:900px;
         margin: 10px 120px;
         overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 6px #66aa00;
         background:#800 url() no-repeat center / cover;--state:paused;
   }
#vid{width: 100%; height: 100%;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}

#xiaobo {z-index: 100;
   width: 350px;
   height: 220px;cursor: pointer;
   margin: 50px 160px;
   position: absolute;
   overflow: hidden;
   -state:paused;
   }
#bnt{margin: 840px 35px ; width: 20px; height: 20px;position: relative; cursor: pointer; z-index: 100;transition: all 1s;}
#cndpt{position: absolute; width: 100%; height: 100%;
background:#eee;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 100%; height: 100%;
opacity:0;background:#eee;
clip-path: polygon(75% 50%, 0 0, 0 100%)
}
#tmsg {position: absolute;
   font: 400 12px sans-serif;
   color: #eee;
      bottom: 40px;
   left:480px;}
#prog {position:absolute;
   width: 540px;
   height: 2px;background:#eee;
   cursor: pointer;
      bottom: 20px;border-radius: 10px;
left:4%;}
#prog-bar {border-radius: 20px;
         height: 100%;
         background: #FF0000;
         width: 0%;
   }

.hexahedron {width: 210px;border: 2px solid #555;
   height: 210px;
   margin: 0px 0px;
      position: relative;
   background:url('https://pic1.imgdb.cn/item/69f59428bd91a69b7b9355b5.jpg')no-repeat 0px -30px/cover;
   border-radius: 12px;mask: radial-gradient(circle at 98% 50%,transparent 40px,#red 0%);-webkit-mask: radial-gradient(circle at 98% 50%,transparent 40px,red 0%); }

#cp { position: relative; top: 0px; left: 0px;width: 200px; height: 200px;transition: 6s;animation:opentop 0.5s linear 1s ;background:repeating-radial-gradient(#111, #111 8px, #555 9px);border-radius: 50%;}
.overlay {z-index: 30;
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(50deg, transparent, 35%, rgba(254,254,254,0.35),60%,transparent);
border-radius: 50%;
}

.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
box-shadow:0px 0px 0px 1px #333,0px 0px 0px 2px #aaa;

background:#5a4532 url()no-repeat center/cover;
border-radius: 50%;
}
.inner::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: #aa2;
border-radius: 50%;
}

#all {position: absolute;width:200px; height:200px;top: 7px; left: 110px;z-index: -1; transition: 2s; animation:tion3s linear 1.5s infinite}
@keyframes opentop { 0% {transform: translatex(-50px);} 100% { transform:rotateX(0px);}}
@keyframes tion { 0% {} 100% { transform:rotate(360deg) } }
#smsvg{ z-index: 10;position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.lrc { z-index: 21; position: absolute; top: 36%; left: 2%; width: 540px; height: 450px; overflow: hidden; }
.lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color: #eee; font: 400 22px 'YouYuan', sans-serif; transition: .3s all ease; list-style-type: none; text-align: center; display: block; padding: 0 10px; height: 50px;line-height: 50px;margin: 0 auto; cursor: pointer; }
.lrc #ul li.active { transform: scale(1.2); color: #00FFaa; font-weight: 540; }
</style>
<div id="bj">
<video id="vid" src="https://mobile-img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/preview/6c5cfbd64ff27969197b9648671fc18d_preview.mp4" loop muted autoplay=""></video>
<div id="xiaobo">
<div class="hexahedron"></div>
<div id="all">
<divid="cp" ><div class="inner"><svgid="smsvg"width="200px" height="200px">
<defs>
<path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
</defs>
<text dx="77" dy="77" font-size="12" fill="#00ff00"font-family="'楷体'">
<textPath href="#path" textLength="535"> 花潮论坛朵儿音悦吧 </textPath>
</text>
</svg>
</div> <div class="overlay"></div>
</div>
</div>
</div>
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
<div id="tmsg">00:00/00:00</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div class="lrc">
         <ul id="ul"></ul>
   </div>
</div>

<audio id="audio" src="https://upfile.mp3.wf/view.php/a03bd85b5ee53ce8c467f372197ba93b.mp3" loop autoplay ></audio>
<script>

var mState = () => audio.paused ?
( bnt.style.setProperty( 'paused'),bnt.title = '点击播放' ) :
( bnt.style.setProperty( 'running'),bnt.title = '点击暂停' );
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
xiaobo.onclick =bnt.onclick = () => audio.paused ? (audio.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',all.style.left = '110px',all.style.animationPlayState = 'running',vid.play()) : (audio.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',all.style.left = '30px',all.style.animationPlayState = 'paused',vid.pause());

prog.onclick = (e) => { audio.currentTime = audio.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');
audio.addEventListener('timeupdate', () => {
      varpercent= (audio.currentTime / audio.duration) * 100;
         progBar.style.width = percent + '%';
   });

audio.addEventListener('timeupdate', () => {
            tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);});

let toMin = (val) => {
            if (!val) return '00:00';
            val = Math.floor(val);
            let min = parseInt(val / 60),
                     sec = parseFloat(val % 60);
            if (min < 10) min = '0' + min;
            if (sec < 10) sec = '0' + sec;
            return min + ':' + sec;
   };
</script>

<script>
(function() {
   let lrc = `
   末班车（微醺R&B 版）
作词：马嵩惟
作曲：李伟菘
制作：朵拉
空着手犹如你来的时候
紧皱的额头终于再没有苦痛
走得太累了眼皮难免会沉重
你没错是应该回家坐坐
鸣笛声悄悄地刺进耳朵
这一次挥手恐怕再没机会问候
最后一遍了换你躲进我双肘
像靠在曾摇动我的天空
别说话泪水你别带走
镜子里的我已留下你轮廓上的笑容
别回眸末班车要开了
你不过先走深爱是让不舍离开的人好好走
鸣笛声悄悄地刺进耳朵
这一次挥手恐怕再没机会问候
最后一遍了换你躲进我双肘
像靠在曾摇动我的天空
别说话泪水你别带走
镜子里的我已留下你轮廓上的笑容
别回眸末班车要开了
你不过先走深爱是让不舍离开的人好好走
别牵挂约好我们再见
散步的午后要像从前再挽着手叙旧
别逗留末班车要开了
路到了尽头回头是为永留心口的人好好走
`;
   let lrcArr = lrc.split('\n');
   let result = [];
   var audio = document.querySelector("#audio");
   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 getIndex() {
         let time = audio.currentTime;
         for (let i = 0; i < result.length; i++) {
            if (result.time > time) {
               return i - 1;
            }
         }
         return result.length - 1;
   }

   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;

   function setOffset() {
         const index = getIndex();
         if (index < 0) return;

         const liHeight = ul.children?.clientHeight || 50;
         let offset = liHeight * index - containerHeight / 2 + liHeight / 2;

         offset = Math.max(minOffset, Math.min(offset, maxOffset));

         ul.style.transform = `translateY(${-offset}px)`;

         ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
         if (index < ul.children.length) {
            ul.children.classList.add('active');
         }
   }

   audio.addEventListener("timeupdate", setOffset);
})();
</script>

朵拉发表于 2026-5-3 14:58

@亚伦影音工作室
问好亚伦老师，请教：学生这帖子里的歌词显示不出来，
是哪一句代码需要修改？{:4_190:}

红影发表于 2026-5-3 15:55

漂亮，欣赏朵宝好帖{:4_187:}

亚伦影音工作室 发表于 2026-5-3 16:02

亚伦影音工作室 发表于 2026-5-3 16:03

本帖最后由亚伦影音工作室于 2026-5-3 16:21 编辑

js修改在三楼源码看看！一并修改你的另一作品《映山红》！

朵拉发表于 2026-5-3 17:03

亚伦影音工作室发表于 2026-5-3 16:03
js修改在三楼源码看看！一并修改你的另一作品《映山红》！

谢谢亚伦老师，祝您假期愉快{:4_204:}

梦江南 发表于 2026-5-3 18:22

欣赏朵拉老师的好听音画。问好！{:4_199:}

梦油发表于 2026-5-3 19:57

欣赏美曲，问候朵拉。

凤舞九天 发表于 2026-5-3 21:20

这首歌好听，
画面做的非常唯美！
{:5_116:}

页: [1]

花潮论坛's Archiver

末 班 车（R&B 版）

末班车（R&B 版）