醉美水芙蓉 发表于 2023-10-15 12:31:22

三生三世十里桃花

本帖最后由 醉美水芙蓉 于 2023-10-15 12:31 编辑 <br /><br /><style>
#papa { margin: 0px -180px; width:1200px; height:600px; background: gray url(' ') 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%;object-fit: cover; pointer-events: none; -webkit-mask-image:radial-gradient(black 30%,transparent 75%); z-index: 2; opacity: 1; }

#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:85%; transform: translate( -50%,0px);font:normal 3em 华文隶书; color:#0000;filter: drop-shadow( 1px 1px 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: 150px; height: 80px;left: 5%; z-index: 120;top:80%;mix-blend-mode:exclusion;   transform:perspective(250px) rotateY(0deg)rotateX(0deg)scale(1.3); }

#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 1.2em华文隶书; opacity: 1; cursor: pointer; z-index: 1660}
</style>

<div id="papa">

<video id="vid" src="http://chuangshicdn.data.mvbox.cn/music/sp/21/08/24/21082416244186520592.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>

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

<div id="lrc" data-lrc="三生三世十里桃花">三生三世十里桃花</div>
<div id="mplayer">
<img id="an"src="http://dashan.link/html/an.png" width="100%" height="100%"></div>
</div>
<audio id="aud" src="https://i.mp3.wf/view.php/055e14dbdf1abe36d424fccf59ff425c.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-12-27 15:32:14

这个作品漂亮！！！！

蓝叶 发表于 2024-1-21 16:36:06

这个作品漂亮！！！！
页: [1]
查看完整版本: 三生三世十里桃花