论坛 › 动画音画 › 《寻遍千山只为你》胡蜜丹 崔伟立

焱鑫磊 发表于 2023-9-2 11:25

《寻遍千山只为你》胡蜜丹 崔伟立

本帖最后由 焱鑫磊 于 2023-9-2 11:21 编辑 <br /><br /><style>
#papa { margin: 100px -300px; width: 1200px; height: 750px; background: gray url('https://pic.imgdb.cn/item/64f29845661c6c8e54a06877.jpg') center/cover no-repeat; box-shadow:0 0px 0px 0px #80ff00; position: relative; z-index: 1; --state: running; overflow:hidden;}

#vid { position: absolute; width: 100%; height: 100%; top: -30px; object-fit: cover; opacity: 1;auto;filter:contrast(120%);transform: scale(1.1, 1.1) }

#photo img {
        width: 100%;
        height: 100%;
        position: absolute;
        border: 0px solid #000000;
        top: 0px;
        left: 0px;
        filter: contrast(150%)brightness(100%);
      -webkit-mask-image:radial-gradient(black 30%,transparent 70%);
      opacity: 0;
        animation-name: round;
        animation-duration: 48s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
}
@keyframes round {
0% { opacity: 0; transform:translate(0%,0%)scale(0);}
5% { opacity: 1; transform:translate(0%,0%)scale(0);}
14% { opacity: 1; transform:translate(0%,0%)scale(1);}
16% { opacity: 1; transform:translate(0%,0%)scale(1);}
24% { opacity: 0; transform:translate(100%,0%)scale(1);}
}
#photo img:nth-child(8) { animation-delay: 42s; }
#photo img:nth-child(7) { animation-delay: 36s; }
#photo img:nth-child(6) { animation-delay: 30s; }
#photo img:nth-child(5) { animation-delay: 24s; }
#photo img:nth-child(4) { animation-delay: 18s; }
#photo img:nth-child(3) { animation-delay: 12s; }
#photo img:nth-child(2) { animation-delay: 6s; }
#photo img:nth-child(1) { animation-delay: 0s; }

#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 45%;top:85%; transform: translate(-50%, 10px);font:normal 2.8em 华文隶书; color:#0000;filter: drop-shadow( 2px 2px 0px #000000); z-index: 2; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; 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; width: 300px; height: 300px;left: -5%; z-index: 120;top:60%; mix-blend-mode:exclusion; transform:perspective(0px) rotateY(0deg)rotateX(0deg)scale(1.0); }
#an{position: absolute; top:0%; left:0%; width: 100%; height:100%; z-index: 120; }
@keyframes cover1{ 0% { width: 100%;transform: rotateY(-180deg)rotatex(0deg);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(-180deg)rotatex(0deg);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%;}
}

#fullscreen { position: absolute; top:5%; left:85%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.0em 华文隶书; opacity: 1; cursor: pointer; z-index: 1660}
</style>

<div id="papa">
<span id="fullscreen">全屏观赏</span>

<video id="vid" src="https://i.mp3.wf/view.php/cdf48d76d9e11e2728aee888cd307c58.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>

<divid="photo">
<img class="photo" src="https://pic.imgdb.cn/item/64f0af8c661c6c8e541cacd3.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f0afbd661c6c8e541cb94b.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f0afda661c6c8e541cbe2e.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f0b012661c6c8e541cc6db.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f0b04f661c6c8e541cd374.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f0b06d661c6c8e541cd83d.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f0b0e7661c6c8e541cee68.jpg" /> <img class="photo" src="https://pic.imgdb.cn/item/64f0b0f6661c6c8e541cf12d.jpg" />
</div>

<div id="mydiv"></div>
<divid="img_border" ></div>
<div id="lrc" data-lrc="焱鑫磊">焱鑫磊博客欢迎您</div>
<div id="mplayer">

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<img alt="" src="https://pic.imgdb.cn/item/64f2a1a7661c6c8e54a2b087.png" style="width: 120px; height: 120px;" /></p>

<p>&nbsp;</p>

</div>
<audio id="aud" src="https://i.mp3.wf/view.php/9e30786b095ff58431318592757a68fc.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 = `《寻遍千山只为你》胡蜜丹 崔伟立
词：张世东 曲：崔伟立
LRC歌词制作：焱鑫磊
夜半风乍起
春潮晚来急
一抹月光映流溪
君归是何期
深谷杜鹃啼
古道行人稀
万缕青丝惹愁绪
不觉秋霜落花满地
杨柳风梧桐雨
寻遍千山只为你
多少儿女情自古伤别离
相思可叹不可医
三生石九张机
寻遍千山只为你
愿与君同心白首不分离
尘缘可望不可及
夜半风乍起
春潮晚来急
一抹月光映流溪
君归是何期
深谷杜鹃啼
古道行人稀
万缕青丝惹愁绪
不觉秋霜落花满地
杨柳风梧桐雨
寻遍千山只为你
多少儿女情自古伤别离
相思可叹不可医
三生石九张机
寻遍千山只为你
愿与君同心白首不分离
尘缘可望不可及
尘缘可望不可及

`;
        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());
})();
img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
      };
</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("an"),
    button = document.getElementById("mplayer");
    if (image && button) {
    button.onclick = function() {
      if (this.value == '') {
         image.play();
            this.value = '.';
      } else {
            image.stop();
            this.value = '';
      }
    };
}

</script>

东篱闲人 发表于 2023-9-2 12:34

这个好！{:5_116:}盗走，不客气。。。{:4_189:}

焱鑫磊 发表于 2023-9-2 12:46

东篱闲人 发表于 2023-9-2 12:34
这个好！盗走，不客气。。。

难得有东篱大哥喜欢的。我看不见，随意拿！{:4_172:}

东篱闲人 发表于 2023-9-2 13:28

焱鑫磊 发表于 2023-9-2 12:46
难得有东篱大哥喜欢的。我看不见，随意拿！

哦了。。。。{:4_193:}

大猫咪 发表于 2023-9-2 14:01

好听好看，制作真棒   谢谢朋友好分享！ 周末快乐！

{:4_204:}{:4_199:}

红影 发表于 2023-9-2 14:10

好漂亮的制作，欣赏焱鑫磊好帖{:4_199:}

焱鑫磊 发表于 2023-9-2 14:15

红影 发表于 2023-9-2 14:10
好漂亮的制作，欣赏焱鑫磊好帖
咱家的美女制作时不能变形。不然养不住，跑了怎么办？{:4_172:}

焱鑫磊 发表于 2023-9-2 14:28

大猫咪 发表于 2023-9-2 14:01
好听好看，制作真棒   谢谢朋友好分享！ 周末快乐！

问好！{:4_187:}{:4_187:}{:4_187:}

红影 发表于 2023-9-2 15:09

焱鑫磊 发表于 2023-9-2 14:15
咱家的美女制作时不能变形。不然养不住，跑了怎么办？

哈哈，真温柔{:4_173:}

查看完整版本: 《寻遍千山只为你》胡蜜丹 崔伟立