亦是金 发表于 2025-3-11 14:02

《喀什噶尔胡杨》 -- 刀郎

本帖最后由 亦是金 于 2025-3-11 15:01 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1891512">
<style>
#papa {
        margin: 50px-110px;
        width: 1220px;
        height: 720px;
        background:url(https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/wbj01.png) no-repeat center/100% 100%;
        position: relative;
        overflow: hidden;
        border-radius:2%;
        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: 1200px;
        height: 700px;
        background: url(https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/wbj01.png) no-repeat center/100% 100%;
        display:none;
}




#vid1{
        width: 1200px;
        height: 0px;
        z-index: -1;
        position:absolute;
        top:20px;
        left:20px;
        object-fit: cover;
        pointer-events: none;
}
.vid{
        width: 1200px;
        height: 700px;
        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 100s linear infinite ;
}
@keyframes round {
        0% {opacity: 0;}
        4% {opacity: 1;}
        10% {opacity: 1;}
        15% {opacity: 0;}
}


.vid:nth-child(1){animation-delay: 90s;}
.vid:nth-child(2){animation-delay: 80s;}
.vid:nth-child(3){animation-delay: 70s;}
.vid:nth-child(4) {animation-delay: 60s;}
.vid:nth-child(5) {animation-delay: 50s;}
.vid:nth-child(6){animation-delay: 40s;}
.vid:nth-child(7){animation-delay: 30s;}
.vid:nth-child(8){animation-delay: 20s;}
.vid:nth-child(9) {animation-delay: 10s;}
.vid:nth-child(10) {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),
.stop .vid:nth-child(7),
.stop .vid:nth-child(8),
.stop .vid:nth-child(9),
.stop .vid:nth-child(10){animation-play-state: paused;}

css-doodle { position: absolute; }


#pic { position: absolute; left: 53%; top: 15%;width: 730px; height: 510px;filter:contrast(120%)brightness(100%);-webkit-mask-image: radial-gradient(black 40% ,transparent 70%);}


#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 3.2em 华文新魏;
        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%; } }

</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: 50px;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="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: 800px;height: 60px;top:15px;LEFT: 240px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#ff0000;"><span style="font-family:华文新魏;"><span style="font-size:48px;">   </span></span></span></p></div>

<div style="position: absolute;width: 300px;height: 30px;top:35px;LEFT: 780px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#2020fa;"><span style="font-family:华文新魏;"><span style="font-size:26px;">演唱：刀 郎 </span></span></span></p></div>

<div style="position: absolute;width: 300px;height: 30px;top:650px;LEFT: 1000px;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:24px;">亦是金在线音乐</span></span></span></p></div>

<video id="vid1" src="https://video-qn.51miz.com/preview\/video\/00\/00\/12\/15\/V-121574-23A34A21.mp4" loop muted autoplay=""></video>

<div id="testImg">
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1337588768.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/54/V-645457-223771DF.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/60/V-646048-C3274FD5.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/54/V-645461-656EAE90.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1301902210.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1301869247.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N639265620.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1301875644.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1301878186.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/61/V-646104-36DD9691.mp4" loop muted autoplay=""></video>
</div>





<img id="pic" src="https://cccimg.com/view.php/8d4eb058627f0acf6bfa1733bfa7af4f.png" alt="" />
<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://cccimg.com/view.php/3f162c2be52e1b112ed2fe43f8dfd77a.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: 90%; left: -220px;font:normal 2.1em 华文楷体;',
      });
</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('.vid');
      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 >







<style type="text/css">
#outLayer {}
#btText        {
        z-index:1;
        left: 400px;
        position:absolute;
        top:0px;
        -webkit-background-clip:text;
        width:100%;
        -webkit-text-fill-color:transparent;
        margin:32px auto;
        -webkit-text-stroke: 1px rgb(0,71,171);
        background-image:url(https://z3.ax1x.com/2021/11/19/IHiwzF.gif);
        font:bold2.8em华文隶书;
        letter-spacing:0px;<!-字母间距：5px；
      line-height:25px<!-行间距：25px
}</style>

<div id="btText"> 《喀什噶尔胡杨》 </div>
</style>


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

<DIV style="HEIGHT: 50px">

liumang 发表于 2025-3-11 21:59

背景这么多视频转换效果，欣赏亦是金老师好制作{:5_150:}{:5_150:}

liumang 发表于 2025-3-11 22:00

感谢分享{:5_124:}

亦是金 发表于 2025-3-12 11:16

liumang 发表于 2025-3-11 21:59
背景这么多视频转换效果，欣赏亦是金老师好制作

问好liumang！{:5_147:}

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

liumang 发表于 2025-3-11 22:00
感谢分享

祝欣赏快乐！{:5_147:}
页: [1]
查看完整版本: 《喀什噶尔胡杨》 -- 刀郎