论坛 › 音乐沙龙 › 《别整那没用的》门小强

亦是金 发表于 2022-10-22 18:26

《别整那没用的》门小强

本帖最后由 亦是金 于 2026-2-4 15:25 编辑 <br /><br />《春暖花开》 - 周艳泓

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1891512">
<style>
#papa {
        margin: 50px -310px;
        width: 1220px;
        height: 720px;
        background:url() no-repeat center/100% 100%;
        position: relative;
        overflow: hidden;
        border-radius: 22px;
        border: thick double#88abfa;
        z-index: 12345;
}

#cndpt{
        margin: 0px 0px ;
        z-index: 10;
        mix-blend-mode: lighten;
        cursor: pointer;
        position:relative;
        width: 1200px;
        height: 700px;
        transform: rotatez(0deg)rotateX(0deg);
        background: url(yanhua01.gi)no-repeat center/100% 100%;
}


#enopg{
        position: relative;
        width: 100%;
        height: 100%;
        top:0px;
        left:0px;

        background: url() no-repeat center/100% 100%;
        display:none;
}

#vid1{
        width: 100%;
        height: 100%;
        z-index: -1;
        position:absolute;
        top:0px;
        left:0px;

        object-fit: cover;
        pointer-events: none;
}
.vid{
        width: 100%;
        height: 100%;
        z-index: -2;
        position:absolute;
        top:0px;
        left:0px;
        border-radius: 20px;
        border: 2px solid #000;
        opacity: 0;
        object-fit: cover;
        pointer-events: none;
        animation: round 10s linear infinite ;
}
@keyframes round {
        0% {opacity: 0;}
        4% {opacity: 1;}
        10% {opacity: 1;}
        15% {opacity: 0;}
}

.vid:nth-child(1){animation-delay: 10s;}


.stop .vid:nth-child(1), {}

css-doodle { position: absolute; }

#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(40deg, #fa4354, #fa4354, #7718f8, #18f5f8, #f5f818, #b75004);
        position: absolute;z-index: 4;
        left: 50%;
        transform: translate(-50%);
        top: 5%;
        font:normal 3.0em 华文新魏;
        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: 43px;
        height: 5px;
        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>

<style type="text/css">

#baiBox {
      margin: auto;
      width: 700px;
      text-align: center;
      font-family:华文新魏;
      font-size: 2.5rem;
      font-weight: bold;
      color: #f73dfa;
      transform-origin: top;
      animation: yao 1.0s linear infinite alternate;
}

@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}



.tit { position: absolute;width: 500px;height: 50px;top: 30px;LEFT: 250px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552) }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/

</style>


<div id="papa">
<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 id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:0px;">《 金 风 玉 露 》</span>
<span style="color:#1e5bf6;"><span style="font-size:0px;">- 旅行新蜜蜂</span></div>

</div>

<div style="position: absolute;width: 300px;height: 30px;top: 91%;LEFT: 82%;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>

<video id="vid1" src="https://video-qn.51miz.com/preview/video/00/00/16/86/V-168690-EB208AEF.mp4" loop muted autoplay=""></video>


<div id="testImg">
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/12/68/V-126813-9655CF1F.mp4" loop muted autoplay=""></video>




</div>

<div id="lrc" data-lrc="">《春暖花开》 - 周艳泓</div>


<div id="mplayer">

<css-doodle grid="6" id="">
:doodle {
        @size: 0px;
        @shape: circle;
        left: 6%;
        top: 75%;
        cursor: pointer;
        z-index: 2;
      background: url(https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/anniu11xg1.png)0 0/100% 100%;
        animation: rot 6s infinite linear forwards var(--state);
}
@keyframes rot { to { transform: rotate(360deg);filter:hue-rotate(360deg)} }       
</css-doodle>




<audio id="aud" src="https://music.163.com/song/media/outer/url?id=337026.mp3" autoplay loop></audio>

</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:998; ${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: 88%; left: 86%; font:normal 1.8em 华文楷体;',
      });
</script>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
《春暖花开》 - 周艳泓
词曲: 浮 克
演唱：周艳泓
歌词编辑：亦是金
。。。。。。
春季已准时地到来
你的心窗打没打开
对着蓝天许个心愿
阳光就会走进来
花儿已竞相地绽开
你别总是站着发呆
快让自己再美丽一些
让世界因你更可爱
有冷就有暖
冬天是否让你好烦
黎明醒来请揉揉你的眼
你会发现天那么蓝
桃花也红了
心情也好了
冰封的情感
请解除冬眠
风也变暖了
云也变淡了
往事已飞了
飞过那忘川
。。。。。。
春季已准时地到来
你的心窗打没打开
对着蓝天许个心愿
阳光就会走进来
花儿已竞相地绽开
你别总是站着发呆
快让自己再美丽一些
让世界因你更可爱
有冷就有暖
冬天是否让你好烦
黎明醒来请揉揉你的眼
你会发现天那么蓝
桃花也红了
心情也好了
冰封的情感
请解除冬眠
风也变暖了
云也变淡了
往事已飞了
飞过那忘川
桃花也红了
心情也好了
冰封的情感
请解除冬眠
风也变暖了
云也变淡了
往事已飞了
飞过那忘川

-- 谢谢欣赏 --


`;

/*变量 ：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); /*获得歌词数组*/
})();
</script>



<script >

(function() {
      const vids = document.querySelectorAll('#vid1');
      var mState = () => {
         vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
      };
      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())};
</script >
<script >
var image = document.getElementById("testImg");
let mState = () => aud.paused ? image.classList.add('stop'):image.classList.remove('stop');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script >



<css-doodle grid="16" id="fFloat">
        :doodle {
                @size: 0px 680px;
        }
        position: absolute;
        left: @r(255)%;
        top: -10%;
        :after {
                position: absolute;
                content: '@p( ♬, ♪, ♩,♫, ∮,开心, ✲,❤, ☺, 美美哒, ★, ☆,love, ❄)';
                color: @p(#ff0000,#ff0ff1,#f8a21b,#2bff0f,#1cdcf8,#5445ea,#faa615);
                font-size: @r(25, 40)px;
        }
        animation: fall 40s @r(-6, 36)s infinite var(--state);
        @keyframes fall {
                from { transform: rotate(0deg) translate(0px); }
                to { transform: rotate(@r(-250,160)deg) translate(-1500px); }
        }
</css-doodle>

<css-doodle grid="20">
               :doodle {@size: 1200px 700px;margin: 0% 0%;}    @grid: 50x1 / 1200px 700px;   
:container {      perspective: 10vmin;    }
pointer-events: auto;   
background: @m(@r(30, 30),radial-gradient( @p(#ff0000,#00ff00,#fff000,#ffffff) 6%,      transparent 20%   )
@r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat);   
@size: 30%;    @place-cell: center;   
border-radius: 50%;   
transform-style: preserve-3d;    animation: scale-up 15s linear infinite var(--state);    animation-delay: calc(@i * -.6s);   
@keyframes scale-up {      0% {   opacity: 0;      transform: translate3d(0, 0, 0) rotate(0);      }      10% {         opacity: 1;       }      95% {      transform:          translate3d(0, 0, @r(50vmin, 55vmin))          rotate(@r(-360deg, 360deg));   }100% {      opacity: 0;      transform: translate3d(0, 0, 1vmin); }    }
</css-doodle>

<div id="enopg">
</td></tr></table>

<DIV style="HEIGHT: 50px">

马黑黑 发表于 2022-10-22 18:45

制作的不错，赞个

绿叶清舟 发表于 2022-10-22 19:12

还会转身的呢，制作真棒

小辣椒 发表于 2022-10-22 20:10

这个也是视频制作的{:4_178:}

亦是金 发表于 2022-10-22 20:13

马黑黑 发表于 2022-10-22 18:45
制作的不错，赞个

谢谢马黑黑老师欣赏点赞，问好！我准备用你的代码试着制作帖子，到时候请老师指正！

亦是金 发表于 2022-10-22 20:14

绿叶清舟 发表于 2022-10-22 19:12
还会转身的呢，制作真棒

谢谢绿叶清舟老师欣赏点赞，问好！{:4_204:}

马黑黑 发表于 2022-10-22 20:59

亦是金 发表于 2022-10-22 20:13
谢谢马黑黑老师欣赏点赞，问好！我准备用你的代码试着制作帖子，到时候请老师指正！

互相学习

相约爱晚亭 发表于 2022-10-22 21:01

欣赏精美音画佳作！

绿叶清舟 发表于 2022-10-22 21:25

亦是金 发表于 2022-10-22 20:14
谢谢绿叶清舟老师欣赏点赞，问好！

不客气了，晚上好

偶然~ 发表于 2022-10-23 13:30

不错{:4_199:}

亦是金 发表于 2022-10-23 14:39

相约爱晚亭 发表于 2022-10-22 21:01
欣赏精美音画佳作！

谢谢老师欣赏，问好！

亦是金 发表于 2022-10-23 14:40

偶然~ 发表于 2022-10-23 13:30
不错

谢谢老师欣赏，问好！

红影 发表于 2022-10-23 22:34

又是人物变色的，制作漂亮，歌曲有趣。欣赏亦是金老师原创好作品{:4_187:}

查看完整版本: 《别整那没用的》门小强