大柚子-爱上我又丢下我
本帖最后由 亚伦影音工作室 于 2026-7-25 10:57 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
#papa { margin: 10px -300px; width: 1286px; height: 720px; background: #880000 url(https://pic1.imgdb.cn/i/1E3K8dvIKtOZO65fO2kq16.png)no-repeat center/cover; box-shadow:0 0px 0px 0px #800000;display: grid; place-items: center; position: relative; z-index: 1; --state: running; overflow:hidden;}
#mplayer {z-index: 1;
position: absolute;top:8%; left:15%;
width: 320px;
height: 540px;
align-items:center;cursor: pointer;
animation: spin 10s infinite linear;
}
.leaf {position: absolute;
width: 40%;
height: 40%;
border-radius: 0px 90px;
border:3px solid #fff;
display: block;
margin-left: auto;
margin-right: auto;
transform-origin: 125% 125%;
}
.leaf:nth-of-type(1) {background:url(https://pic1.imgdb.cn/i/1rCMqhWWRtXPGml1uEH6xf.webp)no-repeat center/cover;
transform: rotate(60deg)translateX(60px);
}
.leaf:nth-of-type(2) {background:url(https://pic1.imgdb.cn/item/6a043d8b6f6a2d474b49f2a1.png)no-repeat center/cover;
transform: rotate(120deg)translateX(60px);
}
.leaf:nth-of-type(3) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/64cfd5a038124ad321400699539dfcf3.jpg)no-repeat center/cover;
transform: rotate(180deg)translateX(60px);
}
.leaf:nth-of-type(4) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/47bedf4a5d73029e5a84095d757cbbd1.jpg)no-repeat center/cover;
transform: rotate(240deg)translateX(60px);
}
.leaf:nth-of-type(5) {background:url(https://pic1.imgdb.cn/i/4DdLmPECk90emnKamkG8PT.webp)no-repeat center/cover;
transform: rotate(300deg)translateX(60px);
}
.leaf:nth-of-type(6) {background:url(https://pic1.imgdb.cn/i/5q6QDXudj1VAnqTCdgWqvb.jpg)no-repeat center/cover;
transform: rotateZ(360deg)translateX(60px);
}
@keyframes spin {0% { transform: rotate(-360deg);}
}
#pp{position: absolute; width:100%; height: 120px; bottom: 0;display: flex;justify-content: center; align-items: flex-end;z-index: 100; }
.mLine {position: relative;margin: 0 0px 0 0;width: 4px;height: 6px;background:rgba(108, 99, 255, 1) ;transition: .35s;opacity: 1;animation: sp 6s linear infinite;border-radius: 50% 50% 0 0;box-shadow: 0px 0px 1.5px 1px rgba(108, 99, 255, 0.8);}
@keyframes sp {
0% { filter:hue-rotate(360deg)contrast(250%)brightness(240%); }
}
.mLine::before { position: absolute; content: ''; width:2px; height:2px; background:#fff000; top: -64px; border-radius: 50%;}
.lrc {z-index: 2;
position: absolute;
width: 80%;
height:180px; /* 只显示第二行歌词高度 */
top: 52%;
left: 32%;
overflow:hidden;
text-align: center;
}
.lrc #ul {filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
width: 100%;
padding: 0;
list-style: none;
transition: 0.1s all ease;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.lrc #ul li {
font-size: 34px;
color: #000;
font-family:"华文隶书", sans-serif;
font-weight:500;
transition: 0.1s all ease;
list-style-type: none;
text-align: center;
padding: 0 10px;
height: 60px;
line-height: 60px;
cursor: pointer;
white-space: nowrap; /* 防止歌词换行 */
}
.lrc #ul li span {
margin: 0 8px;
transform-origin: center center; /* x轴和y轴均以中心为原点 */
transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); /* 缓动函数让动画更自然 */
display: inline-block; /* 确保transform-origin生效 */
}
.lrc #ul li span.active {
font-family: "华文隶书", "Microsoft YaHei", sans-serif;
font-weight: 500;
font-size: 40px;
color: red;
transform: scale(1.2)rotate(-360deg); /* 缩放效果 */
}
#fullscreen{border-radius: 4px;position: absolute;
color:#eee;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 100;
font:400 36px/0px "STKaiti";color: #fff;
border: none;
cursor: pointer; top: 5%;
left: 2%;
}
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id="pp" ></div>
<div class="lrc">
<ul id="ul"></ul>
</div>
<div id="mplayer">
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
</div>
</div>
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=3393091109.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 words = lrcData.trim().split('');
let lineWords = [];
let startTime = parseTime(lrcTime);
let wordDuration = (i < lrcArr.length - 1 && lrcArr.includes('[')) ?
(parseTime(lrcArr.split(']').substring(1)) - startTime) / words.length : 0.5;
words.forEach((word, index) => {
lineWords.push({ time: startTime + index * wordDuration, text: word });
});
result.push(lineWords);
}
function randomColor(){
const colors = ['#880000','#ffbb33','#00C851','#000078','#aa66cc','#ff8800','#ff33cc'];
return colors;
}
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 __Ox1264a5=["\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","\x73\x70\x61\x6E","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x74\x65\x78\x74","\x74\x69\x6D\x65","\x64\x61\x74\x61\x73\x65\x74","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x66\x6F\x72\x45\x61\x63\x68","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\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 _0x5404x2=document]();for(let _0x5404x3=0;_0x5404x3< result];_0x5404x3++){let _0x5404x4=document](__Ox1264a5);result]((_0x5404x5)=>{let _0x5404x6=document](__Ox1264a5);_0x5404x6]= _0x5404x5];_0x5404x6]]= _0x5404x5];_0x5404x4](_0x5404x6)});_0x5404x4](__Ox1264a5,()=>{return audio]= result]});_0x5404x2](_0x5404x4)};ul](_0x5404x2)}createElements();;;(function(_0x5404x7,_0x5404x8,_0x5404x9,_0x5404xa,_0x5404xb,_0x5404xc){_0x5404xc= __Ox1264a5;_0x5404xa= function(_0x5404xd){if( typeof alert!== _0x5404xc){alert(_0x5404xd)};if( typeof console!== _0x5404xc){console](_0x5404xd)}};_0x5404x9= function(_0x5404xe,_0x5404x7){return _0x5404xe+ _0x5404x7};_0x5404xb= _0x5404x9(__Ox1264a5,_0x5404x9(_0x5404x9(__Ox1264a5,__Ox1264a5),__Ox1264a5));try{_0x5404x7= __encode;if(!( typeof _0x5404x7!== _0x5404xc&& _0x5404x7=== _0x5404x9(__Ox1264a5,__Ox1264a5))){_0x5404xa(_0x5404xb)}}catch(e){_0x5404xa(_0x5404xb)}})({})
createElements();
let containerHeight = container.clientHeight;
let liHeight = 60;
let minOffset = 0;
let maxOffset = ul.clientHeight - containerHeight;
const visibleLines = 2;
let prevIndex = -1;
function setOffset() {
let index = getIndex();
if (index === -1) index = 0;
let offset = Math.max(0, Math.min((index - Math.floor(visibleLines / 2)) * liHeight, maxOffset));
ul.style.transform = `translateY(-${offset}px)`;
if (prevIndex !== -1) {
let prevLi = ul.children;
if (prevLi) {
prevLi.querySelectorAll('span.active').forEach(span => span.classList.remove('active'));
prevLi.classList.remove('active');
}
}
let currentLi = ul.children;
if (currentLi) currentLi.classList.add('active');
let currentTime = audio.currentTime;
let currentLine = result;
if (currentLine) {
currentLine.forEach((wordObj, wordIndex) => {
let span = currentLi.children;
span.style.color = ul.style.color = randomColor();
if (currentTime >= wordObj.time &&
(wordIndex === currentLine.length - 1 || currentTime < currentLine?.time)) {
span.classList.add('active');
} else {
span.classList.remove('active');
}
});
const currentLyric = currentLine.map(wordObj => wordObj.text).join('');
if (!currentLyric) return;
let charIndex = 0;
for (let j = 0; j < currentLine.length; j++) {
if (currentLine.time <= currentTime) {
charIndex = j + 1;
}
}
}
prevIndex = index;
}
audio.addEventListener("timeupdate", setOffset);
mplayer.onclick = () => audio.paused ? audio.play() : audio.pause();
audio.addEventListener('playing', () => mplayer.style.animationPlayState = 'running');
audio.addEventListener('pause', () => mplayer.style.animationPlayState = 'paused');
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
<script>
(function() {
ypData = ;
let total = Math.ceil(pp.offsetWidth / 4);
let cNum = 0;
for(j=0; j<total; j++) {
let el = document.createElement('span');
el.className = 'mLine';
el.style.height = Math.floor(Math.random()* 100) + 10;
pp.appendChild(el);
}
let lines = document.querySelectorAll('.mLine');
pp.onclick = () => audio.paused ? audio.play() : audio.pause();
audio.addEventListener('timeupdate', () => {
cNum ++;
if(cNum >= ypData.length) cNum = 0;
setPinpu(cNum);
});
function setPinpu(num) {
let data = ypData;
for(j=0; j<total; j++) {
lines.style.height = Math.floor(Math.random() * data / 1.5) + Math.floor(Math.random() *60) + 'px';
}
}
})();
</script>
这个是恋曲1990的曲子重新填词的？ 这制作真漂亮。欣赏亚伦老师好帖{:4_187:}
页:
[1]