论坛 › 动画音画 › 《山路十八弯》李琼

焱鑫磊 发表于 2023-8-29 01:51

《山路十八弯》李琼

本帖最后由 焱鑫磊 于 2023-8-29 01:52 编辑 <br /><br /><meta charset="utf-8">
<style>
#papa { margin: 100px -280px; width: 1164px;height:620px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;border: 1px solid;background: #333 url('https://pic.imgdb.cn/item/64ecd838661c6c8e54f0a9bf.jpg') no-repeat center/cover;
position: relative;z-index: 12345;}
#papa::before { position: absolute; content: ''; border-radius: inherit; width: 100%; height: 100%; transition: all 2s linear; }
#papa::before { background: tan url('https://pic.imgdb.cn/item/64ecd998661c6c8e54f0cf5b.jpg') no-repeat center/cover;transform: rotateY(0deg); }
#papa:hover::before { transform: translate(0%,0%) rotateY(0deg)scale(3);opacity: 0; }
#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:82%; transform: translate(-50%, 10px);font:normal 2.6em 华文隶书; color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%);filter: drop-shadow( 2px 2px 0px #000000); z-index: 2; }
#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); }
#mplayer { position: absolute; font: normal 7em/0em serif;color:#00ff00;left: 0%;top:95%;cursor: pointer;z-index:880;animation: spin 10s infinite linear;}
@keyframes spin {0% { transform: rotate(360deg); }}
#dt{position: absolute;width: 80%; height: 80%;top:10%; left:10%;mix-blend-mode: lighten;z-index: 2;}
@keyframes cover1{0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%);width: 100%;}
}
@keyframes cover2 { 0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%);width: 100%;}
}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 3em华文隶书; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id="mydiv"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="dt"><img id="testImg"src="https://img.365.tf/file/2023/07/05/y087m8.gif" width="100%" height="100%">
<div id="mplayer">✺</div>
</div>
<audio id="aud" src="https://i.mp3.wf/view.php/dfa496c5d5ac8b563fed6acffb4d0c0b.mp3" autoplay loop></audio>
<script>
(function() {
        let mKey = 0, mFlag = true;
        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;};
        let averAdd = 0, offset = 0;
        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 geci = `《山路十八弯》李琼
词：佟文西 尹建平
曲：王原平
哟大山的子孙哟
爱太阳喽太阳那个爱着哟
山里的人哟
这里的山路十八弯
这里的水路九连环
这里的山歌排对排
这里的山歌串对串
十八弯弯出了土家人的金银寨
九连环连出了土家人的珠宝滩耶
没有这十八弯就
没有美如水的山妹子
没有这九连环就
没有壮如山的放排汉
十八弯啊九连环十八弯九连环
弯弯环环环环弯弯
都绕着土家人的水和山
这里的山路十八弯
这里的水路九连环
这里的山歌排对排
这里的山歌串对串
排对排排出了土家人的苦和甜
串对串串出了土家人的悲与欢耶
没有这排对排
就不能质朴朴地表情谊
没有这串对串
就没有缠绵绵地表爱恋
排对排串对串排对排串对串
排排串串串串排排
都连着土家人的梦和盼哟
谢谢欣赏！
`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
        mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();

mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}

var image = document.getElementById("testImg"),
    button = document.getElementById("mplayer");
    if (image&& button) {
    button.onclick = function() {
      if (this.value == '') {
         image.play();
            this.value = '.';
      } else {
            image.stop();
            this.value = '';
      }
    };
}
let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>
<style>
#mydiv {
      margin: 10px auto;
      width: 100%;
      height: 100%;
       overflow: hidden;
      cursor: pointer;
      position: relative;
      --state: paused;}
.dot {z-index: 2;
      position: absolute;
      left: 40%;
      top:60%;
   width:250px;opacity:0;
      height:260px;
       background: url('https://pic.imgdb.cn/item/643c03fe0d2dde5777107ce2.png')no-repeat center/cover;
}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-620px); filter:hue-rotate(360deg);opacity:1;}}
</style>
<script>
Array.from({length: 100}).forEach( (item,key) => {
      let sp = document.createElement('span');
      let ww = Math.random() * 5 + 2;
      sp.className = 'dot';
      sp.style.cssText += `
                --deg: ${-100 + Math.random() * 200}deg;
                animation: ani 10s ${Math.random() * key - 2}s infinite alternate var(--state);
      `;
      mydiv.appendChild(sp);
});
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>

红影 发表于 2023-8-29 09:25

漂亮，背景和歌曲十分相配，很有特色的歌曲。欣赏焱鑫磊好帖{:4_199:}

红影 发表于 2023-8-29 09:26

又是做帖做到那么晚啊，太拼了。这个评分后可以正常重新播放呢。{:4_204:}

焱鑫磊 发表于 2023-8-29 09:56

红影 发表于 2023-8-29 09:25
漂亮，背景和歌曲十分相配，很有特色的歌曲。欣赏焱鑫磊好帖

谢谢红影鼓励！{:4_187:}

焱鑫磊 发表于 2023-8-29 09:56

红影 发表于 2023-8-29 09:26
又是做帖做到那么晚啊，太拼了。这个评分后可以正常重新播放呢。

问好红影！{:4_204:}

梦油 发表于 2023-8-29 10:20

图曲相辅相成，太美了，
李琼真可惜，多好的一个苗子啊！哎！可惜了！

红影 发表于 2023-8-29 14:02

焱鑫磊 发表于 2023-8-29 09:56
谢谢红影鼓励！

问好焱鑫磊，下午好{:4_187:}

红影 发表于 2023-8-29 14:02

焱鑫磊 发表于 2023-8-29 09:56
问好红影！

焱鑫磊做帖子能做到那么晚，真的太不容易了{:4_187:}

查看完整版本: 《山路十八弯》李琼