为爱流泪的女人 (DJ何鹏版) - 陈瑞
本帖最后由 亚伦影音工作室 于 2025-4-24 16:38 编辑 <br /><br /><style>#bj {
position: relative;
width: 550px;
height:850px;
margin: 10px 120px;
overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
background:#800 url('https://file.moyublog.com/phone_wallpapers_titlepic/m5j4rpi13ur.jpg') no-repeat center / cover;--state:paused;
}
#bfq{
position:absolute;
width: 450px;
height:350px;overflow: hidden;
top:0%;background:#0000;
left: 10%;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://img2.kuwo.cn/star/albumcover/500/73/4/3127652553.jpg') no-repeat center / cover;
left: 2%;z-index: 2;}
#cp{
position:absolute;
width: 260px;border-radius: 50%;cursor: pointer;
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), 60%, transparent);
border-radius: 50%;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, white), color-stop(50%, #F796A8), to(#F796A8));
background:#000 url('https://img2.kuwo.cn/star/albumcover/500/73/4/3127652553.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: #ccc;
border-radius: 50%;
}
#bnt{margin: 250px 250px ; 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%)
}
.lrc {
position: absolute;
top: 50%;
left: 5%;
width: 540px;
height: 350px;
overflow: hidden;
filter:drop-shadow(#000 0.8px 0 0)drop-shadow(#000 0 0.8px 0)drop-shadow(#000 -0.8px 0 0) drop-shadow(#000 0 -0.8px0);
}
.lrc #ul {
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
.lrc #ul li {
font-size: 20px;
color: #fff;
font-weight: 400;
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 {
font-size: 25px;
color: #EE7700;
font-weight: 450;
text-align: center;
}
</style>
<div id="bj">
<div id="bfq">
<div id="tu">
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</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/f4/e5/8a/20432af9e7dc1d624c713467dd1fc6e9/audio.mp3" loop autoplay ></audio>
<script>
let lrc = `为爱流泪的女人 (DJ何鹏版) - 陈瑞
词：高羽
曲：陈伟
编曲：阿浩
制作人：陈伟
出品人：陈伟
空落落的房间有一点冷
好像你此刻 冰凉的眼神
祈求你给我 最后一个吻
留做以后 回忆的标本
曾以为会是你最爱的人
今天才知道 现实多残忍
我忍着不让 自己哭出声
却又止不住 泪雨纷纷
我这个为爱 流泪的女人
总是握不住 匆匆的缘分
全心的投入 那么的认真
所有委屈 默默独自吞
我这个为爱 流泪的女人
总是舍不得 埋怨一个人
你给的伤害 无论有多深
学会了流泪 却学不会恨
空落落的房间有一点冷
好像你此刻 冰凉的眼神
祈求你给我 最后一个吻
留做以后 回忆的标本
曾以为会是你最爱的人
今天才知道 现实多残忍
我忍着不让 自己哭出声
却又止不住 泪雨纷纷
我这个为爱 流泪的女人
总是握不住 匆匆的缘分
全心的投入 那么的认真
所有委屈 默默独自吞
我这个为爱 流泪的女人
总是舍不得 埋怨一个人
你给的伤害 无论有多深
学会了流泪 却学不会恨
我这个为爱 流泪的女人
总是握不住 匆匆的缘分
全心的投入 那么的认真
所有委屈 默默独自吞
我这个为爱 流泪的女人
总是舍不得 埋怨一个人
你给的伤害 无论有多深
学会了流泪 却学不会恨
`;
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',cndpt.style.opacity = '1') : (audio.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0');
</script>
歌词不会走动？ 奇怪，我点击按钮音乐没有停止 明天电脑上去看看，感谢亚伦老师分享 歌词可以走动了，按钮停止音乐还在，明天再看看 发现电脑也是按钮不能停止
页:
[1]