论坛 › 音乐沙龙 › 《烟雨苏杭》天籁天

亦是金 发表于 2025-11-30 13:39

《烟雨苏杭》天籁天

本帖最后由 亦是金 于 2025-12-12 20:00 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1891512">
<style>
#papa {
        margin: 100px -310px;
        width: 1220px;
        height: 720px;

        background:url() no-repeat center/100% 100%;
        position: relative;
        overflow: hidden;
        border-radius: 2%;
        border: thick double#88abfa;
        z-index: 12345;
}

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

#enopg{
        position: relative;
        width: 100%;
        height: 100%;
        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: 0%;
        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 60s linear infinite ;
}
@keyframes round {
        0% {opacity: 0;}
        4% {opacity: 1;}
        10% {opacity: 1;}
        15% {opacity: 0;}
}





.vid:nth-child(1){animation-delay: 50s;}
.vid:nth-child(2){animation-delay: 40s;}
.vid:nth-child(3){animation-delay: 30s;}
.vid:nth-child(4) {animation-delay: 20s;}
.vid:nth-child(5) {animation-delay: 10s;}
.vid:nth-child(6){animation-delay: 0s;}


.stop .vid:nth-child(1),
.stop .vid:nth-child(2),
.stop .vid:nth-child(3),
.stop .vid:nth-child(4),
.stop .vid:nth-child(5),
.stop .vid:nth-child(6){animation-play-state: paused;}

css-doodle { position: absolute; }


#pic { position: absolute; left: 20%; top: 15%;width: 800px; height: 444px;filter:contrast(120%)brightness(100%);-webkit-mask-image: radial-gradient(black 60% ,transparent 70%); opacity: .8;}

#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(5deg, #e71134, #f851cb, #c338f7, #389ff7,#c3f738,#fbc91d, #fb7b1d);
        position: absolute;
      z-index: 4;
        left: 50%;
        transform: translate(-50%);
        top: 90%;
writing-mode: horizontal-tb;
        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%;
writing-mode: horizontal-tb;
        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: 100%; } to { width: 100%; } }
@keyframes cover2 { from { width: 100%; } 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: 80%; filter: hue-rotate(30deg); }
#clone_player1 { --time: 1.4s; left: 78%; top: 82%; filter: hue-rotate(30deg); }
#clone_player2 { --time: 2.4s; left: 85%; top: 70%; filter: hue-rotate(50deg); }
#clone_player3 { --time: 2.0s; left: 70%; top: 83%; filter: hue-rotate(60deg); }
#clone_player4 { --time: 1.4s; left: 60%; top: 74%; filter: hue-rotate(40deg); }
#clone_player5 { --time: 3.4s; left: 50%; top: 70%; filter: hue-rotate(10deg); }
#clone_player6 { --time: 2.6s; left: 40%; top: 81%; filter: hue-rotate(60deg); }
#clone_player7 { --time: 1.0s; left: 31%; top: 75%; filter: hue-rotate(40deg); }
#clone_player8 { --time: 3.4s; left: 93%; top: 76%; filter: hue-rotate(10deg); }
#clone_player9 { --time: 2.4s; left: 22%; top: 84%; filter: hue-rotate(20deg);}
#clone_player10 { --time: 0.4s; left: 15%; top: 78%; filter: hue-rotate(60deg); }
@keyframes rotating {
        from { transform: translate(0,0px) rotate(0deg)scale(1);}
        to { transform: translate(0px,130px) rotate(2480deg)scale(1);filter: hue-rotate(360deg); }
}


</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>

<video id="vid1" src="https://video.699pic.com/videos/11/29/23/a_675c769bcc60417341129238372.mp4" loop muted autoplay=""></video>




<img id="pic" src="https://upfile.mp3.wf/view.php/ae8c8bd9c94a95450bdc3a697d082e1a.png" alt="" />

<div style="position: absolute;width: 500px;height: 50px;top:20px;LEFT: 400px;z-index: 88;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:#f638ef;"><span style="font-family:微软简中圆;"><span style="font-size:36px;"></span></span></span></p></div>

<div style="position: absolute;width: 500px;height: 50px;top:40px;LEFT: 700px;z-index: 99;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:#386df6;"><span style="font-family:微软简中圆;"><span style="font-size:20px;"> </span></span></span></p></div>

<div style="position: absolute;width: 300px;height: 30px;top: 93%;LEFT: 83%;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>

<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=1380312349" 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: 100% 100%;
        }
        position: absolute;
        left: @r(255)%;
        top: -10%;
        :after {
                position: absolute;
                content: '@p( ♬, ♪, ♩,♫,✲,❤, ☺, &#128150;, ☂, ✿, ❀, &#128525;)';
                color: @p(#ff0000,#ff0ff1,#f8a21b,#2bff0f,#8eedfb,#fcb06c,#a0f888);
                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: 100% 100%;margin: 0% 0%;}    @grid: 20x1 / 100% 100%   
: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>


</td></tr></table>

偶然~ 发表于 2025-11-30 14:08

来欣赏亦是金精品佳作！

偶然~ 发表于 2025-11-30 14:09

制作大气

偶然~ 发表于 2025-11-30 14:09

背景歌声唯美动听

偶然~ 发表于 2025-11-30 14:09

太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】

偶然~ 发表于 2025-11-30 14:09

期待亦是金佳作频出！

偶然~ 发表于 2025-11-30 14:09

愿你事事如意吉祥，幸福快乐绵长。

偶然~ 发表于 2025-11-30 14:09

感谢亦是金支持花潮论坛，辛苦了，祝亦是金和家人岁岁安康，幸福吉祥！

红影 发表于 2025-11-30 16:37

很漂亮的，这样飘落各种符号的记得做过，都忘记怎样做了{:4_173:}
这个人物是遮挡Logo用的吧，人物很美。
欣赏亦是金老师好帖{:4_199:}

亦是金 发表于 2025-11-30 17:09

偶然~ 发表于 2025-11-30 14:08
来欣赏亦是金精品佳作！

问好偶然管理！{:4_180:}

亦是金 发表于 2025-11-30 17:10

偶然~ 发表于 2025-11-30 14:09
制作大气

谢谢欣赏点赞！{:4_190:}

亦是金 发表于 2025-11-30 17:10

偶然~ 发表于 2025-11-30 14:09
背景歌声唯美动听

谢谢你的喜欢！{:4_189:}

亦是金 发表于 2025-11-30 17:11

偶然~ 发表于 2025-11-30 14:09
太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】

{:4_205:}

亦是金 发表于 2025-11-30 17:12

偶然~ 发表于 2025-11-30 14:09
期待亦是金佳作频出！

我会努力的！{:4_170:}

亦是金 发表于 2025-11-30 17:13

偶然~ 发表于 2025-11-30 14:09
感谢亦是金支持花潮论坛，辛苦了，祝亦是金和家人岁岁安康，幸福吉祥！

祝你欣赏愉快！{:4_176:}

梦油 发表于 2025-11-30 17:14

歌声美，画面美，美人美，怎一个美字了得！{:5_116:}

亦是金 发表于 2025-11-30 17:16

红影 发表于 2025-11-30 16:37
很漂亮的，这样飘落各种符号的记得做过，都忘记怎样做了
这个人物是遮挡Logo用的吧，人物很美。
...

问好红影管理！{:4_187:}人物是遮挡摄图网Logo用的，{:4_170:}

红影 发表于 2025-11-30 20:03

亦是金 发表于 2025-11-30 17:16
问好红影管理！人物是遮挡摄图网Logo用的，

很巧妙的构思{:4_173:}

清茶煮雪 发表于 2025-11-30 20:11

很喜欢老师的音画作品，老师创作辛苦了{:4_190:}

清茶煮雪 发表于 2025-11-30 20:12

歌的意境和画面人物，满天飘飞的音符，这画面太完美了。

查看完整版本: 《烟雨苏杭》天籁天