谁对我好我就对谁好——马健涛
本帖最后由 亚伦影音工作室 于 2025-5-31 18:53 编辑 <br /><br /><style>#bj {
position: relative;
width: 1286px;
height:740px;
margin: 120px -320px;
overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
background:#800 url(https://pic1.imgdb.cn/item/683a8cc358cb8da5c81e81b5.jpg) no-repeat center / cover;--state:paused;
}
#dh{ width: 100%; height: 100%; position: absolute;
z-index: 1;
top:0px; left:0px;
animation: rod 2s linear infinite var(--state);}
@keyframes rod{ 0% { background:radial-gradient(circle farthest-corner at center center, transparent 32%, #ff0000 100%); }
25% { background:radial-gradient(circle farthest-corner at center center, transparent 32%, #800000 100%); }
50% { background:radial-gradient(circle farthest-corner at center center, transparent 32%, #000080 100%); }
75% { background:radial-gradient(circle farthest-corner at center center, transparent 32%, #995918 100%); }
100%{ background:radial-gradient(circle farthest-corner at center center, transparent 22%, #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(.8);
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://img3.kuwo.cn/star/albumcover/500/s3s44/38/2168132317.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://img3.kuwo.cn/star/albumcover/500/s3s44/38/2168132317.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: 40%;
left: 20%;
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 22px '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.6);
color: #000;
font-weight: 650;
text-align: center;
}
#fullscreen {border-radius: 4px;position: relative;background:#0000 ;
color:#fff;box-shadow:0px 0px 0px 1px #fff;z-index: 20;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 85%;top: 90%;
}
</style>
<div id="bj">
<span id="fullscreen" title="屏展模式">全屏欣赏</span>
<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.ananas.chaoxing.com/sv-w7/audio/e6/09/98/6e1ebeeca17bb7f13a4baa9eb5e31982/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;
};
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
bj.requestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
</script> 谢谢亚伦老师精彩分享，祝双节快乐{:4_191:} 还以为是要点击唱片暂停，原来有专门的暂停按钮，还有播放进度展示。
欣赏亚伦老师好帖{:4_199:} 歌曲还挺有道理，变色背景也漂亮。给亚伦老师点赞{:4_187:} 欣赏老师的精彩音画，点赞！
页:
[1]