致奔波在人生路上的自己
本帖最后由 亚伦影音工作室 于 2025-5-30 09:49 编辑 <br /><br /><style>#bj {
position: relative;
width: 1286px;
height:740px;
margin: 140px -300px;
overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
background:#800 url('https://pic1.imgdb.cn/item/681f6f6c58cb8da5c8eb844e.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 22%, #ff0000 100%); }
25% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #800000 100%); }
50% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #000080 100%); }
75% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #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://pic1.imgdb.cn/item/681f6f6c58cb8da5c8eb844e.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://pic1.imgdb.cn/item/681f6f6c58cb8da5c8eb844e.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 10px ; 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: #00f500;
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.ananas.chaoxing.com/sv-w8/audio/1d/5c/95/7dc6843e7cac66573bf932d605afd49e/audio.mp3" loop autoplay ></audio>
<script>
let lrc = `致奔波在人生路上的自己
作词：晗熙
作曲：阿豪
演唱：凝音
☆★Lrc编辑 梅竹★☆
☆★协编 亚伦★☆
亚伦影音工作室
谁愿意日日 披星戴月
只是生活 它像一个圆圈
我们往复的走 从不停歇
眼中为谁多了坚决
日子虽苦偶尔却有甜
雨过天晴伤痛也会改变
就把遗憾放在 已去的昨天
然后大步向前
致那奔波人生路上的自己
走到如今你用了多大勇气
到底怎样的结局 才配这颠沛流离
我知道你一定不会放弃
致那奔波人生路上的自己
你所有努力值得幸福肯定
就别让心太累了 看看沿途风景
再重新 把一切追寻 天会放晴
亚伦影音工作室
日子虽苦偶尔却有甜
雨过天晴伤痛也会改变
就把遗憾放在 已去的昨天
然后大步向前
致那奔波人生路上的自己
走到如今你用了多大勇气
到底怎样的结局 才配这颠沛流离
我知道你一定不会放弃
致那奔波人生路上的自己
你所有努力值得幸福肯定
就别让心太累了 看看沿途风景
再重新 把一切追寻 天会放晴
致那奔波人生路上的自己
走到如今你用了多大勇气
到底怎样的结局 才配这颠沛流离
我知道你一定不会放弃
致那奔波人生路上的自己
你所有努力值得幸福肯定
就别让心太累了 看看沿途风景
再重新 把一切追寻 天会放晴
(Music)
☆★谢谢欣赏★☆
=End=
`;
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>
https://pic1.imgdb.cn/item/68135af758cb8da5c8d624a9.gif 又是亚伦老师自己做的代码光盘呢，漂亮。
歌词同步的字体选择也漂亮。
欣赏亚伦老师好帖{:4_199:} 就一个图，加了背景变色，做了这个效果出来很不错哦{:4_199:} 欣赏亚纶精彩的制作 欣赏老师的佳作，点赞！
页:
[1]