周公难解那红楼的梦 扁鹊医不好人间疾苦的痛
本帖最后由 亚伦影音工作室 于 2025-6-14 10:31 编辑 <br /><br /><style>#bj {
position: relative;
width: 1286px;
height:740px;
margin: 150px -300px;
overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
background:#800 url(https://pic1.imgdb.cn/item/683a8d3f58cb8da5c81e820c.jpg) no-repeat center / cover;--state:paused;
}
#dh{ width: 100%; height: 100%; position: absolute;
z-index: 1;
top:0px; left:0px;
animation: rod 3s linear infinite var(--state);}
@keyframes rod{ 0% { background:radial-gradient(circle farthest-corner at center center, transparent 42%, #ff0000 100%); }
25% { background:radial-gradient(circle farthest-corner at center center, transparent 42%, #800000 100%); }
50% { background:radial-gradient(circle farthest-corner at center center, transparent 42%, #000080 100%); }
75% { background:radial-gradient(circle farthest-corner at center center, transparent 42%, #995918 100%); }
100%{ background:radial-gradient(circle farthest-corner at center center, transparent 42%, #97349E 100%); }
}
#vid{width: 100%; height: 100%;
position:absolute;z-index: 2;
top:0%; left:0%;mix-blend-mode: lighten;
object-fit: cover; pointer-events: none;
}
#bfq{
position:absolute;
width: 450px;transform:scale(.6);
height:350px;overflow: hidden;
top:0%;background:#0000;
left: 1%;z-index: 20;}
#tu{
position:absolute;
width: 300px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;
height:300px;border-radius: 10px;
top:10%;background:#000 url(https://pic1.imgdb.cn/item/683a8d3f58cb8da5c81e820c.jpg) no-repeat center / cover;
left: 2%;z-index: 2;}
#cp{
position:absolute;
width: 260px;border-radius: 50%;
height:260px;animation: rotating 6s infinite linear var(--state);
top:15%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
left: 41%;z-index: 1;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;}
@keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 260px;
height: 260px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 65%, transparent);
border-radius: 50%;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 0px #eee;
background:#000 url(https://singerimg.kugou.com/uploadpic/softhead/120/20230420/20230420224446937451.jpg) no-repeat center / cover;
border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #000;
border-radius: 50%;
}
#bnt{margin: 240px 20px ; width: 30px; height: 30px;position: relative; cursor: pointer; }
#cndpt{position: absolute; width: 30px; height: 30px;
background:#fff;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 30px; height: 30px;
opacity:0; background:#fff;
clip-path: polygon(75% 50%, 0 0, 0 100%)
}
#tmsg{position: absolute;width: 100px; height: 60px;font:500 12px sans-serif;color: #fff;top:20px;left: 200px;}
.lrc {z-index: 1;
position: absolute;
top: 30%;
left: 60%;
width: 540px;
height: 350px;
overflow: hidden;
}
.lrc #ul {
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
.lrc #ul li {
color: #fff;
font: normal 20px 'FZYaoti', 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.4);
color: #00ff00;
font-weight: 650;
text-align: center;
}
</style>
<div id="bj">
<video id="vid" src="https://video-qn.51miz.com/preview/video/00/00/15/08/V-150854-3AE5689D.mp4" loop muted autoplay=""></video>
<div id="dh" ></div>
<div id="bfq">
<div id="tu">
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
<div id="tmsg">00:00 | 00:00</div>
</div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>
<div class="lrc">
<ul id="ul"></ul>
</div>
</div>
<audio id="audio" src="https://s2.cldisk.com/sv-w9/audio/95/42/6e/5b3883ad96c1f9a2b0a2fe86b36e5713/audio.mp3" loop autoplay ></audio>
<script>
let lrc = `周公难解那红楼的梦
想去陶渊明种豆的南山
种下理想和期盼
路过那片诗里的桃花源
放下满身的疲倦
再听李清照写的声声慢
再把生活缓一缓
望着天上星河不停的转
我也该醒过来为了生活再往前
周公难解那红楼的梦
世人也不懂唐朝取经的僧
怎样才能够活好红尘这一生
过来人的话也听不懂
周公难解那红楼的梦
扁鹊医不好人间疾苦的痛
往后还会有多少的磕磕碰碰
脚下的路该何去何从
想去陶渊明种豆的南山
种下理想和期盼
路过那片诗里的桃花源
放下满身的疲倦
再听李清照写的声声慢
再把生活缓一缓
望着天上星河不停的转
我也该醒过来为了生活再往前
周公难解那红楼的梦
世人也不懂唐朝取经的僧
怎样才能够活好红尘这一生
过来人的话也听不懂
周公难解那红楼的梦
扁鹊医不好人间疾苦的痛
往后还会有多少的磕磕碰碰
脚下的路该何去何从
周公难解那红楼的梦
世人也不懂唐朝取经的僧
怎样才能够活好红尘这一生
过来人的话也听不懂
周公难解那红楼的梦
扁鹊医不好人间疾苦的痛
往后还会有多少的磕磕碰碰
脚下的路该何去何从
`;
let lrcArr = lrc.split('\n');
let result = [];
var audio = document.querySelector("#audio"),
ul = document.querySelector("#ul"),
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;
}
var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1263fc=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x77\x6F\x72\x64","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x74\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5d03x2=document]();for(let _0x5d03x3=0;_0x5d03x3< result];_0x5d03x3++){let _0x5d03x4=document](__Ox1263fc);_0x5d03x4]= result];_0x5d03x4](__Ox1263fc,function(){audio]= result]});_0x5d03x2](_0x5d03x4)};ul](_0x5d03x2)}(function(_0x5d03x5,_0x5d03x6,_0x5d03x7,_0x5d03x8,_0x5d03x9,_0x5d03xa){_0x5d03xa= __Ox1263fc;_0x5d03x8= function(_0x5d03xb){if( typeof alert!== _0x5d03xa){alert(_0x5d03xb)};if( typeof console!== _0x5d03xa){console](_0x5d03xb)}};_0x5d03x7= function(_0x5d03xc,_0x5d03x5){return _0x5d03xc+ _0x5d03x5};_0x5d03x9= _0x5d03x7(__Ox1263fc,_0x5d03x7(_0x5d03x7(__Ox1263fc,__Ox1263fc),__Ox1263fc));try{_0x5d03x5= __encode;if(!( typeof _0x5d03x5!== _0x5d03xa&& _0x5d03x5=== _0x5d03x7(__Ox1263fc,__Ox1263fc))){_0x5d03x8(_0x5d03x9)}}catch(e){_0x5d03x8(_0x5d03x9)}})({})
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;
const offset = liHeight * index - containerHeight / 2 + liHeight / 2;
ul.style.transform = `translateY(${-offset}px)`;
ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
ul.children?.classList.add('active');
const currentLyric = result.word.trim();
if (!currentLyric) return;
const nextTime = result?.time || audio.duration;
const duration = nextTime - result.time;
const charIndex = duration > 0 ?
Math.min(Math.floor((audio.currentTime - result.time) / (duration / currentLyric.length)), currentLyric.length) :
currentLyric.length;
}
let rafId;
audio.addEventListener("timeupdate", () => {
rafId = requestAnimationFrame(setOffset);
});
var mState = () => audio.paused ?
( bj.style.setProperty('--state', 'paused'),bnt.title = '点击播放' ) :
( bj.style.setProperty('--state', 'running'),bnt.title = '点击暂停' );
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
bnt.onclick = () => audio.paused ? (audio.play(),enopg.style.opacity= '0',vid.play(),cndpt.style.opacity = '1') : (audio.pause(),enopg.style.opacity = '1',vid.pause(),cndpt.style.opacity = '0');
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>
漂亮的多行歌词，位置设置很巧妙，高亮歌词正好在横档上。{:4_199:}
这歌词有意思，好像是像小朋友唱的呢。 播放器的小图取了和背景一致的图图，构思巧妙，制作精美。
欣赏亚伦老师好帖{:4_199:} 欣赏佳作，问候亚伦。 漂亮的画面和好听的歌曲。 雅致、便捷、顺畅，谢谢亚伦老师经典分享，顺祝节日快乐{:4_190:} 欣赏老师的佳作，上午好！
页:
[1]