情毒____陈瑞

亚伦影音工作室 发表于 2025-9-8 16:39

本帖最后由亚伦影音工作室于 2025-9-14 21:33 编辑 <br /><br /><style>
.blackhole {margin: 150px 0 20px calc(50% - 721px);
position: relative;
width: 1286px;
height: 700px;
perspective: 1200px;
background:url(https://pic1.imgdb.cn/item/68be8b6558cb8da5c8883639.jpg) no-repeat center / cover;
overflow: hidden;--stat: running;
}
#qmsvg{ position: absolute;z-index: 8;
   left: 8%;cursor: pointer;
   top: 14%;
   animation: rot 10s linear infinite var(--stat);
}
@keyframes rot {to { transform: rotate(-360deg);filter: hue-rotate(360deg); }}
.ring {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px;
border-radius: 50%;
border: 1px solid transparent;
border-image: conic-gradient(from 0deg, #fff000, #ff8c00, #00ff00, #ff0000) 1;
opacity: 0;
transform-style: preserve-3d;
animation: suckIn 6s linear infinite var(--stat);
animation-fill-mode: both;
filter: blur(2px) drop-shadow(0 0 6px rgba(255, 80, 200, 0.2));
transform-origin: 52% 48%;
}

@keyframes suckIn {
0% {
   transform: translateZ(var(--z)) rotateY(var(--rotateY)) rotateX(var(--rotateX)) scale(0.8);
   opacity: 0;
}
10% {
   opacity: 0.3;
}
40% {
   opacity: 0.6;
}
90% {
   opacity: 0.4;
}
100% {
   transform: translateZ(600px) rotateY(var(--rotateYEnd)) rotateX(var(--rotateXEnd)) scale(2);
   opacity: 0;
}
}

#girl{ left: 0%;top:0%; z-index: 8;
   position:absolute;
   width: 400px;background:url(https://singerimg.kugou.com/uploadpic/softhead/120/20241120/20241120090714715943.jpg) no-repeat center / cover;
   height:400px;animation: rotating 6s infinite linear var(--stat);}
@keyframes rotating { 0%{ transform: rotate(0deg)scale(.3); }100%{ transform: rotate(360deg)scale(.3);filter: hue-rotate(360deg); } }
#lrc{right:5%;top: 8%;}#lrcc {right:10%;top: 22%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#ff0000;border:0px solid black;position: absolute;letter-spacing: 1px;font:normal 2.4em 华文隶书;color: #000;white-space: pre;writing-mode: vertical-lr;-webkit-background-clip: text;z-index: 9;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 0%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);background-clip: text; /* 重设背景剪裁风格（重要） */-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 { from { height: 0; }to { height: 100%; } }
@keyframes cover2 { from { height: 0;}to { height: 100%;} }
</style>
<div class="blackhole">
<div id="girl"></div>
<svgid="qmsvg"width="200px" height="200px">

<defs>
<path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
</defs>
<text dx="30" dy="30" font-size="30" fill="#ffff00"font-family="'楷体'">
<textPath href="#path" textLength="600">花潮论坛亚伦影音工作室</textPath>
</text>
</svg>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/d4/02/36/d912f7fd6a970141ab5d37b989da4471/audio.mp3" autoplay loop></audio>

<script>
qmsvg.onclick =girl.onclick = () => aud.paused ? aud.play():aud.pause();
mState = () => {blackhole.style.setProperty('--stat', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();
const blackhole= document.querySelector('.blackhole');
</script>
<script>
const container = document.querySelector('.blackhole');
const totalRings = 70;
const spacing = 20;

for (let i = 0; i < totalRings; i++) {
const ring = document.createElement('div');
ring.className = 'ring';

const z = -i * spacing;
const angle = (i / totalRings) * 360;

ring.style.setProperty('--z', `${z}px`);
ring.style.setProperty('--rotateY', `${angle}deg`);
ring.style.setProperty('--rotateX', `${angle / 2}deg`);
ring.style.setProperty('--rotateYEnd', `${angle + 180}deg`);
ring.style.setProperty('--rotateXEnd', `${angle / 2 + 90}deg`);
ring.style.animationDelay = `${i * 0.09}s`;

container.appendChild(ring);
}
</script>

<script type="module">
var path = createStartPath(8, 200, 160);
girl.style.setProperty('clip-path',`path('${path}')`);

// 创建星形函数，参数：
// lines 边的总数
// r1 外圆半径（确定顶角，取值依据为正方形边长）
// r2 内圆半径（确定控制点，取值依据为曲线曲率期望值）
// 注意：r1 > r2 是设计初衷
function createStartPath(lines, r1, r2=0) {
var a = 360 / lines, path = 'M', bx1, by1, bx2, by2;
Array.from({length: lines}).forEach((_,k) => {
var a1 = a * k,
a2 = a1 - a / 2,
x1 = (r1 + r1 * Math.cos(Math.PI / 180 * a1)).toFixed(2),
y1 = (r1 + r1 * Math.sin(Math.PI / 180 * a1)).toFixed(2),
x2 = (r1 + r2 * Math.cos(Math.PI / 180 * a2)).toFixed(2),
y2 = (r1 +r2 * Math.sin(Math.PI / 180 * a2)).toFixed(2);
if (k === 0) {
bx1 = x1;
by1 = y1;
bx2 = x2;
by2 = y2;
path += `${x1} ${y1} `;
} else {
path += `Q${x2} ${y2},${x1} ${y1} `;
}
if (k === lines - 1) path += `Q${bx2} ${by2},${bx1} ${by1}`;
});
return path;
}
</script>
<span id="lrcStr" style="visibility: hidden;">
情毒/陈瑞
亚伦影音工作室/出品
代码设计/亚伦
演唱/陈瑞
曾经陪你一起朝朝暮暮
曾经卿卿我我风雨共度
如今剩我一人被情束缚
你给的伤让我体无完肤
为何爱情让我先甜后苦
为何付出所有你不满足
掏心掏肺换来伤痕无数
只能在夜里偷偷的痛哭
你给的爱是无解的毒
痴情的我情海中漂浮
孟婆的汤要喝了多少壶
才能忘记一起走的路
你给的爱是无解的毒
再大的风吹不走孤独
冰冷的心何处是归宿
痛彻心扉又有谁在乎
曾经陪你一起朝朝暮暮
曾经卿卿我我风雨共度
如今剩我一人被情束缚
你给的伤让我体无完肤
为何爱情让我先甜后苦
为何付出所有你不满足
掏心掏肺换来伤痕无数
只能在夜里偷偷的痛哭
你给的爱是无解的毒
痴情的我情海中漂浮
孟婆的汤要喝了多少壶
才能忘记一起走的路
你给的爱是无解的毒
再大的风吹不走孤独
冰冷的心何处是归宿
痛彻心扉又有谁在乎
你给的爱是无解的毒
痴情的我情海中漂浮
孟婆的汤要喝了多少壶
才能忘记一起走的路
你给的爱是无解的毒
再大的风吹不走孤独
冰冷的心何处是归宿
痛彻心扉又有谁在乎

</span>
<script >
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
   let tmpAr = [];
   for(j = 0; j <ar.length - 1; j ++) {
            if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
   }
   let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
   tmpAr.push(aver);
   tmpAr.forEach((item,key) => {
            ar = item > aver ? aver : item;
   });
   return ar;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
   let lrcAr = [];
   let arr="";
   let calcRule = ;
   for(x of text.split('\n')) {
            let ar = [];
            let re = /\d+[\.:]\d+([\.:]\d+)?/g;
            let geci = x.replace(re,'');
            if(geci) {
                     geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                     let time = x.match(re);
                     if(time != null) {
                           for(y of time) {
                                    let tmp = y.match(/\d+/g);
                                    let sec = 0;
                                    for(z in tmp) sec += tmp * calcRule;
                                    ar = ;
                                    lrcAr.push(ar);
                           }
                     }
            }
   }
   lrcAr.sort((a,b)=> a - b);
   return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
   lrca=lrcAr;
   lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
   let Y=String(mKey/2).indexOf(".");
   if (Y == -1)
{
   0==mKey&&(lrc.innerHTML=lrca);
   lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
   lrcc.dataset.lrc = "";
   lrc.style.setProperty('--motion', 'cover1');
   lrc.style.setProperty('--tt', time + 's');

lrcc.style.setProperty('--motion', 'cover2');
   }
else
{
   lrc.innerHTML = lrcb;
   lrcc.dataset.lrc = lrca;
   lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
   lrcc.style.setProperty('--tt', time + 's');

lrc.style.setProperty('--motion', 'cover2');
   }
   mKey += 1;
};
/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
            }
   }
   if (mKey < 0) mKey = 0;
   if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
   let time = lrcAr - (aud.currentTime - lrcAr);
   showLrc(time);
};

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"));
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});
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;
   };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

老谟深虑 发表于 2025-9-8 16:44

欣赏老师的代码音画，学习了！

梦油发表于 2025-9-8 17:00

欣赏佳作，问候亚伦。

红影发表于 2025-9-8 22:04

这小播真美，两行的竖向歌词同步也漂亮。
欣赏亚伦老师好帖{:4_199:}

小文发表于 2025-9-9 09:17

欣赏，谢谢！{:4_191:}

小辣椒 发表于 2025-9-11 13:54

亚纶这个背景特效一键停止做的非常漂亮{:4_199:}

小辣椒 发表于 2025-9-11 13:55

后面我有时间这个会套用玩一次，这个效果非常喜欢{:4_187:}

页: [1]

花潮论坛's Archiver

情毒____陈瑞