论坛 › 欢乐水吧 › 清平误 TO醉美水芙蓉

东篱闲人 发表于 2023-7-26 21:51

清平误 TO醉美水芙蓉

</div>
</div>
</div><div class="pct"><style type="text/css">.pcb{margin-right:0}</style><div class="pcb">

<style>
#papa {
        margin: 100px -300px;
        width: 1164px;
        height: 640px;
      
          background: linear-gradient(to right, #000000,#000080,#222278);
        box-shadow: 0 0 0px #000;
        position: relative;
        z-index: 1;overflow:hidden;
        --state: paused;
}
css-doodle { position: absolute; }

.photo {width: 100%;
height: 100%;
position: absolute;z-index: 3;

top:0px; left:0px;
-webkit-mask-image: radial-gradient(black 20% ,transparent 70%);
opacity: 0;

animation: round 180s linear infinite;}

@keyframes round{0% {
-webkit-transform:rotate(0)scale(1.5)translate(10%,0%);
opacity:0}
5% {
-webkit-transform:rotate(0)scale(1.5)translate(-10%,0%);
opacity:1}
6% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,10%);
opacity:1}
7% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,-10%);
opacity:1}
8% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1}
9% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:1}
10% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:0}
}

img:nth-child(1) {animation-delay: 168s;}
img:nth-child(2) {animation-delay: 156s;}
img:nth-child(3) {animation-delay: 144s;}
img:nth-child(4) {animation-delay: 132s;}
img:nth-child(5) {animation-delay: 120s;}
img:nth-child(6) {animation-delay: 108s;}
img:nth-child(7) {animation-delay: 96s;}
img:nth-child(8) {animation-delay: 84s;}
img:nth-child(9) {animation-delay: 72s;}
img:nth-child(10){animation-delay: 60s;}
img:nth-child(11){animation-delay: 48s;}
img:nth-child(12){animation-delay: 36s;}
img:nth-child(13){animation-delay: 24s;}
img:nth-child(14) {animation-delay: 12s;}
img:nth-child(15) {animation-delay: 0s;}
.stop img:nth-child(1),
.stop img:nth-child(2),
.stop img:nth-child(3),
.stop img:nth-child(4),
.stop img:nth-child(5),
.stop img:nth-child(6),
.stop img:nth-child(7),
.stop img:nth-child(8),
.stop img:nth-child(9),
.stop img:nth-child(10),
.stop img:nth-child(11),
.stop img:nth-child(12),
.stop img:nth-child(13),
.stop img:nth-child(14),
.stop img:nth-child(15){animation-play-state: paused;}


#canv {mix-blend-mode: lighten;
        position: absolute;
        display: block;
        height: 100%;
        position: relative;
        cursor: pointer;
        z-index: 5;opacity: 0.8;
}
#vid { display: none; }

#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:82%; transform: translate(-50%, 10px);font:normal 3em FangSong; font-weight:1000;color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%) drop-shadow( 2px 2px 0px #000000); z-index: 10; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1{   0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}
@keyframes cover2 {   0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}

.wenzi { position: absolute; left: 18%; top: 18%; z-index: 10; color:#ffffff; font: bold 20px/20px 'FangSong',serif;opacity: 1; }
#papa:hover #fullscreen { display:block ;}


#fullscreen { position: absolute; top:2%; left:5%;color:#FFffff; font:normal2.2em华文行楷; opacity: 1; cursor: pointer; z-index: 6}



</style>

<div id="papa">
      <div id="lrc" data-lrc="清平误">清平误</div>

<div id="testImg" >
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64c11f851ddac507cc777df6.jpg" />

<img alt="" class="photo"src="https://pic.imgdb.cn/item/64c11fa91ddac507cc77bf96.jpg" />

<img alt=""class="photo"src="https://pic.imgdb.cn/item/64c11fbf1ddac507cc77e74d.jpg" />

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64c11fd71ddac507cc7811b7.jpg" />

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64c11fee1ddac507cc783a02.jpg" />

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64c120061ddac507cc786409.jpg " />

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64c120201ddac507cc788f24.jpg" />

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64c1203b1ddac507cc78b924.jpg" />

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64c120511ddac507cc78dc8a.jpg" />

<img alt="" class="photo"src="https://pic.imgdb.cn/item/64c120681ddac507cc790579.jpg" />

<img alt=""class="photo"src="https://pic.imgdb.cn/item/64c120871ddac507cc793aff.jpg" />

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64c1209e1ddac507cc79639e.jpg" />

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64c120c01ddac507cc799af2.jpg" />

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64c120d41ddac507cc79bdf3.jpg" />

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64c120e91ddac507cc79e369.jpg" />

</div>

        <divstyle="width: 400px;height: 320px;overflow:hidden;margin: 3% 70%;position: absolute;" id="but">
<css-doodleid="mplayer">
          :doodle {
                @grid: 2 / 300px 60px;
            position: absolute;z-index: 40;
                color: var(--color);
            transform: scale(1);
                --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color:#ffffff; --state: paused;
      }
      /* 时间信息 : 左 */
      @nth(1) {
                @place: 25% 80%;
                :after { content: var(--ttmsg1); }
      }
      /* 控制器 */

      @nth(2) {
                @size: var(--size);
                @shape:windmill;
                @place: 50% 35%;

             background:var(--color);
                animation: rot 6s infinite linear var(--state);
      }


      /* 时间信息 : 右 */
      @nth(3) {
                @place: 75% 80%;
                :after { content: var(--ttmsg2); }
      }
   /* 进度条 */
      @nth(4) {
                @place: 50% 80%;
                @size: 100% 2px;
                background: #aaaaaa;
               display: grid;
                place-items: center start;
                :before {
                        content: '';
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
      }
      @keyframes rot { to { transform: rotate(1turn); } }

</css-doodle>
<div class="wenzi">清平误</div>

</div>

<canvas id="canv"></canvas>
        <span id="fullscreen">全屏观赏</span>
<video id="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/12/23/V-122382-2B421D95.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1346753468.mp3" autoplay loop></audio>

</div>

<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
        ctx.drawImage(vid, 0, 0, ww, hh);
        if(!vid.paused) {
                requestAnimationFrame(loop);
                return;
        }
}
let mState = () => aud.paused ? ( mplayer.style.setProperty('--state', 'paused'), vid.pause()) : ( mplayer.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

</script>

<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 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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('timeupdate', () => {
                mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
                mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
      });
      mplayer.onclick = (e) => {
                if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY < 46) aud.paused ? aud.play() : aud.pause();
                if(e.offsetY > 46) aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
      }
})();


</script>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
作词 : 未见钗头凤
作曲 : Winky诗
配图：东篱闲人
作曲 : Winky诗
作词 : 未见钗头凤
改编／翻唱：黄诗扶
后期：幺唠

昨夜小楼又东风
四十年家国 三千里地
收入谁囊中
南歌子里唱哑声
断了琵琶画筝
弦上血红 无所适从

一样舞袖换唐宫
眼看他如我 江山坐拥
我却如飞蓬
长恨事与愿难逢
偏生不擅纵横
笔墨作剑 词骨襟胸

金戈铁马踏碎
一场与世无争
故人山河如梦
醒来人去阶苔冷
落纸卷外万般空
快过了林花谢春红
岂是风花雪月
等闲伤情可相同

昨夜小楼又东风
四十年家国 三千里地
收入谁囊中
南歌子里唱哑声
断了琵琶画筝
弦上血红 无所适从

饮宴衣裙曾连城
沉醉好偷生 锈甲忘弓
仓皇溃兵锋
最忆辞庙叹倥偬
烽火为我掌灯
无颜悲痛 羞对苍穹

金戈铁马踏碎
一场与世无争
故人山河如梦
醒来人去阶苔冷
落纸卷外万般空
快过了林花谢春红
岂是风花雪月
等闲伤情可相同

岂是风花雪月
等闲伤情可相同

鸣谢：李大白

`;

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

let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>
<script>


var image = document.getElementById("testImg"),
    button = document.getElementById("but");
   
if (image.classList && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
</script>

醉美水芙蓉 发表于 2023-7-26 22:21

醉美水芙蓉 发表于 2023-7-26 22:26

东篱闲人 发表于 2023-7-26 22:36

醉美水芙蓉 发表于 2023-7-26 22:21
东篱老师把这个代码去掉！论坛歪了！

去掉了一个，没看到有啥变化，代码这玩意实在整不明白。。{:5_117:}

东篱闲人 发表于 2023-7-26 22:36

醉美水芙蓉 发表于 2023-7-26 22:26
谢谢东篱老师！辛苦了！

不客气，没外人！{:5_117:}

醉美水芙蓉 发表于 2023-7-26 22:43

东篱闲人 发表于 2023-7-26 22:48

醉美水芙蓉 发表于 2023-7-26 22:43
老师这个去掉！

去掉了。可还是不灵，你再看看，还去掉啥？{:5_117:}

红影 发表于 2023-7-26 23:59

这个制作很漂亮，但代码里好像有问题呢{:4_173:}

红影 发表于 2023-7-27 00:03

帮东篱大哥调了一下，现在可以了{:4_204:}

红影 发表于 2023-7-27 00:05

很雅致漂亮。水芙蓉美女收礼开心{:4_187:}

东篱闲人 发表于 2023-7-27 08:42

红影 发表于 2023-7-27 00:03
帮东篱大哥调了一下，现在可以了

你真厉害！{:5_116:}

东篱闲人 发表于 2023-7-27 08:47

红影 发表于 2023-7-26 23:59
这个制作很漂亮，但代码里好像有问题呢

偷盗不容易，或偷多了，或偷少了。。。{:5_103:}

红影 发表于 2023-7-27 11:06

东篱闲人 发表于 2023-7-27 08:42
你真厉害！

帖子是东篱大哥，又精美又雅致，要说厉害也是东篱大哥厉害呢{:4_187:}

红影 发表于 2023-7-27 11:07

东篱闲人 发表于 2023-7-27 08:47
偷盗不容易，或偷多了，或偷少了。。。

其实套用给出代码的更方便点，自己查看的代码有些会看错。

东篱闲人 发表于 2023-7-27 11:09

红影 发表于 2023-7-27 11:06
帖子是东篱大哥，又精美又雅致，要说厉害也是东篱大哥厉害呢

不不不，还是你厉害！{:5_116:}

东篱闲人 发表于 2023-7-27 11:10

红影 发表于 2023-7-27 11:07
其实套用给出代码的更方便点，自己查看的代码有些会看错。

俺腼腆，不好意思和人家要。人家给了还好，人家不给俺就得自杀。。。。{:5_109:}

马黑黑 发表于 2023-7-27 13:10

东篱闲人 发表于 2023-7-27 08:47
偷盗不容易，或偷多了，或偷少了。。。

不多不少六毛最好{:4_170:}

东篱闲人 发表于 2023-7-27 15:39

马黑黑 发表于 2023-7-27 13:10
不多不少六毛最好

你经验太丰富了。。{:5_116:}

醉美水芙蓉 发表于 2023-7-27 18:08

东篱闲人 发表于 2023-7-27 18:32

醉美水芙蓉 发表于 2023-7-27 18:08
代码问题只要找黑黑老师，马上搞定！现在正常了！老师可以把代码重新保存一下！

嗯嗯，已经保存了。。。{:5_112:}

查看完整版本: 清平误 TO醉美水芙蓉