论坛 › 动画音画 › 像明月被偏爱 - 叶里[控]

亚伦影音工作室 发表于 2023-9-9 12:27

像明月被偏爱 - 叶里[控]

本帖最后由 亚伦影音工作室 于 2023-9-10 12:10 编辑 <br /><br /><style>
#papa {margin: 0px 0 0 calc(50% - 681px); width: 1164px;height:680px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;place-items: center;background: #333 url('https://xlaj.cn/assets/file/zp/20230908105521.jpg') no-repeat center/cover; position: relative;z-index: 12345;}
#tu{position: absolute;top:0%; left:0%;z-index: 2;
      width: 100%;background:url('https://xlaj.cn/assets/file/zp/20230908105601.jpg') no-repeat center/cover;
      height: 100%;animation: round 4s linear infinite; }
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);filter:hue-rotate(360deg);
opacity:1}

100% {
-webkit-transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}
#dt{position: absolute;top:60%; left:10%;width: 35%;height: 22%;z-index:2;}
#flyBox { --w: 112px; width: var(--w); overflow: hidden; color: #cccccc; position: absolute; left:23%;bottom: 35%; font: normal 0.5em华文新魏;z-index:5;}
#flyBox div { word-break: keep-all; white-space: nowrap; animation: fly 10s linear infinite; background:#0000}
@keyframes fly { from { transform: translateX(100%); } to { transform: translateX(calc(0% - var(--w))); }}
#lrc { --motion: cover2; --tt: 2s; position: absolute; left: 50%;top:82%;transform: translate(-50%); font:normal 3.2em 华文新魏; color:#0000;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0); z-index: 5; place-items: center; overflow: hidden; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; place-items: center;}
@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(150%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
@keyframes cover2 { 0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(150%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(150%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);width: 100%;}
}
#mplayer { position: absolute; left: 21%;top:73%;cursor: pointer;z-index:888; width: 100%;mix-blend-mode: lighten; filter:invert(100%)}
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);overflow: hidden;}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id='tu'></div>
<div id='dt' ><img id="testImg" src="https://pic.imgdb.cn/item/64fc23e6661c6c8e54eee347.gif" width="100%" height="100%"></div>
<div id="flyBox"><div > 像明月被偏爱 - 叶里出品 亚伦影音工作室   像明月被偏爱 - 叶里出品 亚伦影音工作室 </div></div>
<span id="fullscreen">全屏观赏</span>

<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>

   <div id="bnt"><div id="mplayer"><audio       style =" width: 12%"id="aud"   controls="controls" autoplay="autoplay" loop="loop" src= "https://www.qqmc.com/mp3/music278038565.mp3" type="audio/mpeg"></audio></div></div>

</div>

<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 = `像明月被偏爱 - 叶里
词：南棠
曲：著小生zoki
编曲：陈林len
和声：叶里
混音/母带：雷震
二胡：辰小弦
制作人：雷震
监制：叶里
当笔墨落满尘埃
你踏着星光走来
乱世中一身纯白
挥不去的阴霾
你为我都拨开
我又撑起了小船
赴往另一个彼岸
尝过清欢百味
拥月色满怀 意料之外
也许还 可总会有一个人
翻越山海 只为你而来
数几声 风会来 手紧握 别放开
这一路 侧千帆 不靠岸 入沧海
若誓言 像明月 被偏爱
告诉他 终究会 终究会回来
赴往另一个彼岸
尝过清欢百味
拥月色满怀 意料之外
也许还 可总会有一个人
翻越山海 只为你而来
数几声 风会来 手紧握 别放开
这一路 侧千帆 不靠岸 入沧海
若誓言 像明月 被偏爱
告诉他 终究会 终究会回来
数几声 风会来 手紧握 别放开
这一路 侧千帆 不靠岸 入沧海
若誓言 像明月 被偏爱
告诉他 终究会 终究会回来
数几声 风会来 手紧握 别放开
这一路 侧千帆 不靠岸 入沧海
若誓言 像明月 被偏爱
他终会回来
`;
      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());
})();

</script>

<script>

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

tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.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");
varbutton = document.getElementById("bnt");
let mState = () => aud.paused ? image.stop() : image.play();
bnt.onclick = () => {aud.paused ? aud.play() : aud.pause();}
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);
    </script>

红影 发表于 2023-9-9 14:03

这个播放器有意思，还可以调剂播放速度呢。也可以调节音量。暂停可以控制所有动态。
欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2023-9-9 16:09

这个漂亮，没有加其他的粒子图进去，这样感觉画面清爽{:4_199:}

小辣椒 发表于 2023-9-9 16:12

播放器位置放的也是好，可以控制画面，现在就滚动字超出了一点，很完美的效果{:4_199:}

小辣椒 发表于 2023-9-9 16:13

滚动字加播放器里面这样可以全控了

小辣椒 发表于 2023-9-9 16:14

欣赏亚伦的精彩制作，这个效果我收藏了，以后也是可以玩玩，谢谢亚伦

小辣椒 发表于 2023-9-10 13:10

就是这个播放器，我昨天添加图片一键停止，没有成功，上次看见你4个图一键可以停止，我发现我加进去没有这个效果，弄到很迟睡觉的

亚伦影音工作室 发表于 2023-9-10 15:37

小辣椒 发表于 2023-9-10 13:10
就是这个播放器，我昨天添加图片一键停止，没有成功，上次看见你4个图一键可以停止，我发现我加进去没有这 ...

辛苦了辣椒，不要大伤脑筋，克隆也不错。

小辣椒 发表于 2023-9-10 18:11

亚伦影音工作室 发表于 2023-9-10 15:37
辛苦了辣椒，不要大伤脑筋，克隆也不错。

亚伦，主要我双休可以玩一下，平时玩的时间少，最近眼睛不是很好，所以又不敢多看，就会急一点

亚伦影音工作室 发表于 2023-9-11 09:26

小辣椒 发表于 2023-9-10 18:11
亚伦，主要我双休可以玩一下，平时玩的时间少，最近眼睛不是很好，所以又不敢多看，就会急一点

我上一个白天歇一明一夜，上一个夜班就休息两个白天两夜里，所以没事干就瞎玩玩！

小辣椒 发表于 2023-9-12 12:55

亚伦影音工作室 发表于 2023-9-11 09:26
我上一个白天歇一明一夜，上一个夜班就休息两个白天两夜里，所以没事干就瞎玩玩！

那你这样玩的时间比我多的多了，我是没有时间，双休多玩一下的，平时晚上迟了第二天都起不来{:4_198:}

查看完整版本: 像明月被偏爱 - 叶里[控]