论坛首页 › 特效动画 › 飒小姐 - 火箭少女101

klxf 发表于 2025-5-6 16:57:45

飒小姐 - 火箭少女101

本帖最后由 klxf 于 2025-5-7 13:04 编辑 <br /><br /><style>
#papa {
        width: 1280px;
        height: 750px;
        background:url(https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/xtpp/01/2h.jpg) no-repeat center/100% 100%;
        position: relative;
        overflow: hidden;
        border-radius: 32px;
        box-shadow: 3px 3px 6px gray;
        z-index: 2;
      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%); }
}

#dt{
      position:absolute;
      width: 100%;
      height: 50%;
      top:50%;
      z-index: 2;
      left: 0%;
      mix-blend-mode: screen;
}
#dt img{width: 100%;
      height: 100%;
    }
#cndpt{
        margin: 0px0px ;
        z-index: 2;
        mix-blend-mode: screen;
        cursor: pointer;
        position:relative;
        width: 100%;
        height: 100%;
        transform: rotatez(0deg)rotateX(0deg);       
}
#vid1{
        width: 100%;
        height: 150%;
        z-index: .99;
        position:absolute;
        top:-150px;
        left:0px;
        object-fit: cover;
        pointer-events: none;
      aspect-ratio: 16/9;
}
#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #ff0000, #80ef03);
        position: absolute;z-index: 4;
        left: 50%;
        transform: translate(-50%);
        top: 85%;
        font:normal 2.4em 华文新魏;
        color: #055306;
        white-space: pre;
        -webkit-background-clip: text;
        filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);       
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#clone_player0,#clone_player1, #clone_player2, #clone_player3, #clone_player4, #clone_player5, #clone_player6, #clone_player7, #clone_player8, #clone_player9, #clone_player10 {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 10%;
        top: 50%;
      width: 33px;
        height: 3px;
        border-radius: 50%;
        background:#00ff00;
        box-shadow: 0px 0px 10px #ff0000;
        --time: .4s;
        animation: rotating 0.65s var(--time) infinite alternate linear var(--state);
}
#clone_player0 { --time: 5.4s; left: 5%; top: 90%; filter: hue-rotate(30deg); }
#clone_player1 { --time: 1.4s; left: 78%; top: 92%; filter: hue-rotate(30deg); }
#clone_player2 { --time: 2.4s; left: 85%; top: 80%; filter: hue-rotate(50deg); }
#clone_player3 { --time: 2.0s; left: 70%; top: 93%; filter: hue-rotate(60deg); }
#clone_player4 { --time: 1.4s; left: 60%; top: 84%; filter: hue-rotate(40deg); }
#clone_player5 { --time: 3.4s; left: 50%; top: 80%; filter: hue-rotate(10deg); }
#clone_player6 { --time: 2.6s; left: 40%; top: 91%; filter: hue-rotate(60deg); }
#clone_player7 { --time: 1.0s; left: 31%; top: 85%; filter: hue-rotate(40deg); }
#clone_player8 { --time: 3.4s; left: 93%; top: 86%; filter: hue-rotate(10deg); }
#clone_player9 { --time: 2.4s; left: 22%; top: 94%; filter: hue-rotate(20deg);}
#clone_player10 { --time: 0.4s; left: 15%; top: 88%; filter: hue-rotate(60deg); }
@keyframes rotating {
        from { transform: translate(0,0px) rotate(0deg)scale(1);}
        to { transform: translate(0px,-80px) rotate(2480deg)scale(1);filter: hue-rotate(360deg); }
}
</style>
<div id="papa" title="播放/暂停" >
<div id="dt">
<img src="https://cccimg.com/view.php/7dedb9e000fd4291a27e6557f3b41c9a.gif" id="IMG" /style="mix-blend-mode: screen "></div>
<div id="cndpt">
      <div id="clone_player0"></div>
        <div id="clone_player1"></div>
        <div id="clone_player2"></div>
        <div id="clone_player3"></div>
        <div id="clone_player4"></div>
        <div id="clone_player5"></div>
        <div id="clone_player6"></div>
        <div id="clone_player7"></div>
        <div id="clone_player8"></div>
      <div id="clone_player9"></div>
      <div id="clone_player10"></div></div>
<video id="vid1" src="https://cccimg.com/view.php/907e516bca873de0c2663dae6151cb33.mp4" loop muted autoplay=""></video>
<div id="lrc" data-lrc="">飒小姐 - 火箭少女101</div>
<audio id="aud" src="https://file.uhsea.com/2505/5723f02db138c29a3a2dbd943b3daf11L3.mp3" autoplay loop></audio>
<div id="mplayer"></div></div>
<script>
(function(){
        let script = document.createElement('script');
        script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
        document.head.appendChild(script);
let mState = () => aud.paused ? ( papa.style.setProperty('--state', 'paused')) : ( papa.style.setProperty('--state', 'running'));
aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
       aud.addEventListener('seeked', () => calcKey());
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow;background: black; border: 0px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:8; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
FS({pa: papa,
set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 92%; left: 90%; font:normal 1.5em 华文楷体;filter: hue-rotate(90deg);cursor: pointer;',
      });

(function() {
/*原始lrc歌词*/
let lrcStr = `


飒小姐 - 火箭少女101
原词曲：Shane Facchinello/Kevin Anyaeji
编曲：Shane Facchinello/Kevin Anyaeji
OP：NUMBER K COMPANY
SP：北京梦织音传媒有限公司
中文词：火星电台
OP：北京飞行者音乐科技有限公司
SP：哇唧唧哇娱乐(天津)有限公司
制作人：火星电台
和声编写&和声：胡维纳
录音师：火星电台/耿潇微
录音室：55Tec 北京
母带工程师：李游(小骷髅)
母带工作室：55Tec 北京
首席运营：哇唧唧哇娱乐(天津)有限公司
制作公司：哇唧唧哇娱乐(天津)有限公司
大合唱：
La la la la la la la la
La la la la la la la
La la la la la la la la la
孟美岐：
醒在五点
酷酷的女孩儿不赶时间
但故意反穿了的 T-Shirt
吴宣仪：
简单的早点
过了赏味的期限
我有办法让它变新鲜
孟美岐/吴宣仪：
la la la la la
杨超越：
不是我喜欢唱反调
段奥娟/赖美云：
la la la la la
Sunnee：
我在炮制无聊的解药
杨超越/紫宁：
la la la la la
段奥娟：
创造者的声音很糙
可它很洗脑
紫宁：
只要我喜欢
我不管
失重的大风一直吹
赖美云：
我爱做女孩儿
还是做女神
我要我买自己这单
傅菁：
我站在云端
站在彼岸
来不及羡慕谁
李紫婷：
因为只要我活着
我相信 我一定比你漂亮
孟美岐/段奥娟/Sunnee：
La la la la la la la la
La la la la la la la
La la la la la la la la la
赖美云：
我一定比你漂亮
吴宣仪/杨超越/赖美云/Yamy：
La la la la la la la la
La la la la la la la
La la la la la la la la la
傅菁：
我一定比你漂亮
徐梦洁：
街拍潦草
飒小姐一直很大条
裹着大过自己的外套
杨超越：
Yo 我很笃定
我的口味很特别
节约妆发的时间
Sunnee/Yamy：
la la la la la
李紫婷：
如果狂风真的迟到
孟美岐/徐梦洁：
la la la la la
紫宁：
我放下骄傲开始祷告
李紫婷/傅菁：
la la la la la
段奥娟：
有一颗永恒的好奇
我不画句号
Sunnee：
只要我喜欢
我不管
失重的大风一直吹
Sunnee/紫宁/傅菁/段奥娟/Yamy：
我爱做女孩儿
还是做女神
我要我买自己这单
孟美岐/吴宣仪/赖美云/杨超越/徐梦洁李紫婷：
我站在云端
徐梦洁：
站在彼岸
孟美岐/吴宣仪/赖美云/杨超越/徐梦洁李紫婷：
来不及羡慕谁
因为只要我活着
傅菁：
我相信
大合唱：
我一定比你漂亮
Rap Yamy：
我的左手不懂调慢 右腕的表
傻瓜才惧怕 衰老
年轻的心 不停跳
Sunnee/紫宁/傅菁/段奥娟/Yamy：
只要我喜欢
我不管
失重的大风一直吹
孟美岐/吴宣仪/赖美云/杨超越/徐梦洁李紫婷：
我要做女神
还是做女孩儿
只要我过自己这关
大合唱：
我站在云端
站在彼岸 来不及羡慕谁
因为只要我活着
我相信 我一定比你漂亮
李紫婷/傅菁/徐梦洁/紫宁：
La la la la la la la la
La la la la la la la
La la la la la la la la la
吴宣仪：
我一定比你漂亮
大合唱：
La la la la la la la la
La la la la la la la
La la la la la la la la la
孟美岐：
我一定比你漂亮

`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, 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 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) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 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 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 mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();

(function() {
      var mState = () => {
         aud.paused ? vid1.pause() : vid1.play();
IMG.style.setProperty('opacity', aud.paused ? '0' : '.9');
      };
   aud.oncanplay =aud.onplaying = aud.onpause = () => mState();
      })();   
varimgElement= document.getElementById('enopg');
cndpt.onclick = () => {aud.paused ? (aud.play(),imgElement .style.display = 'none',vid1.play()) : (aud.pause(),imgElement.style.display = 'block',vid1.pause())};

const xCenter = (el) => {
          const rt = el.getBoundingClientRect();
          const ww = window.innerWidth;
          const ox = (ww - rt.width) / 2.07 - rt.left;
          el.style.transform = `translateX(${ox}px)`;
        };
        xCenter(papa);
</script>

醉美水芙蓉 发表于 2025-5-7 20:28:23

这个频谱漂亮！

醉美水芙蓉 发表于 2025-5-7 20:28:42

视频素材漂亮！

klxf 发表于 2025-5-7 20:33:05

醉美水芙蓉 发表于 2025-5-7 20:28
这个频谱漂亮！

这是个动图，谢谢醉美 管理员支持与鼓励:)

xibaoe 发表于 2025-5-9 10:38:31

赞，顶帖真的超有韵味

MichaelCok 发表于 昨天 01:07

感谢分享，引发深入思考啦

查看完整版本: 飒小姐 - 火箭少女101