岩新新 发表于 2023-6-21 11:26

高安、杭娇 - 一生无悔

本帖最后由 岩新新 于 2023-6-21 12:41 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1907567">
<style>
#papa {
        margin: 10px -320px;
        width: 1400px;
        height: 740px;
        background:
                linear-gradient(41deg, rgba(251, 7, 7, 0.33) 0%,rgba(6, 19, 157, 0.31) 44%,rgba(19, 233, 63, 0.56) 100%),
                #000 url('https://pan.111t.net/view.php/01c355870110b545f67867aa63fc295d.gif')0 0/100% 100%;
position: relative;
        z-index: 1;overflow: hidden;}
#dt1{position: absolute;top:0%; left:0%;z-index: 3;
        width:34%;mix-blend-mode: lighten;         
        height:100%;transform: rotateY(0deg);opacity: 1}

#dt2{position: absolute;top:0%; left:34%;z-index: 3;
        width:34%;mix-blend-mode: lighten;         
        height:100%;transform: rotateY(0deg);opacity: 1}
#dt3{position: absolute;top:0%; left:66%;z-index: 3;
        width:34%;mix-blend-mode: lighten;         
        height:100%;transform: rotateY(0deg);opacity: 1}

.photo {width: 100%;
height: 100%;
position: absolute;z-index: 2;
border:3px solid #ffffff;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation: round 90s linear infinite;}

@keyframes round{0% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-160deg)scale(0.7)translate(-15%,-20%);
opacity:1
}
10% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0)scale(0.7)translate(-15%,-20%);
opacity:1}
12% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0)scale(0.7)translate(-15%,-20%);
opacity:1}

22% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(160deg)scale(0.7)translate(-15%,-20%);
opacity:0}
}

img:nth-child(1) {animation-delay: 84s;}
img:nth-child(2) {animation-delay: 78s;}
img:nth-child(3) {animation-delay: 72s;}
img:nth-child(4) {animation-delay: 66s;}
img:nth-child(5) {animation-delay: 60s;}
img:nth-child(6) {animation-delay: 54s;}
img:nth-child(7) {animation-delay: 48s;}
img:nth-child(8) {animation-delay: 42s;}
img:nth-child(9) {animation-delay: 36s;}
img:nth-child(10){animation-delay: 30s;}
img:nth-child(11){animation-delay: 24s;}
img:nth-child(12){animation-delay: 18s;}
img:nth-child(13){animation-delay: 12s;}
img:nth-child(14) {animation-delay: 6s;}
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;}
#mplayer {position: absolute;
      top:35%; left:2%;z-index: 20;
      width: 300px;filter:hue-rotate(0deg);
      height:300px;
   }

#vid { display: none; }
#canv {   mix-blend-mode:soft-light;
        position: absolute;
        display: block;z-index: 2;
        top:-5%; left:0%;
transform:scale(1,1.1);
        opacity: 0;
}
</style>


<div id="papa">

<div id='dt1'><img id="testImg1" src="https://pan.111t.net/view.php/7be279d7447b9bf61a5c3da56a568472.gif" width="200%" height="100%"></di
<div id="testImg" >
<img alt="" class="photo" src="https://pan.111t.net/view.php/7be279d7447b9bf61a5c3da56a568472.gif" />
</div>
<canvas id="canv"></canvas>
<div id="mplayer"><img id="ant" src="http://www.kumeiwp.com/sub/filestores/2023/05/31/8db48bfe543eaa6299bcfd3213f6378e.gif" width="80%" height="80%"></div>
<div data-lrc="" id="lrc"></div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/06/21/a4ce1de79b1c1042d1111fbaa2c3e6b7.mp3" autoplay loop></audio>
<video id="vid" src="https://st0.dancf.com/gaoding/gaoding/32f68376-b9f9-41ff-9819-ee55e0ef6acc53192003.mp4" loop autoplay muted></video>


<style type="text/css">
#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;z-index: 4;
        left: 50%;
        transform: translate(-50%);
        top: 85%;
        font:normal 3em 华文隶书;
        color: #000078;
        white-space: pre;
        -webkit-background-clip: text;
        filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
       
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `




高安、杭娇 - 一生无悔

作词：高安

作曲：阿民

编曲：牛渡

女：好久没联络

现在你过得怎么样

忘不掉昨日的时光

男：就算各一方

依然把你放心上

这段情怎能说忘就忘

女：相逢的泪水

忍不住流淌

男：多情的话语

合：已变的凄凉

女：无怨无悔爱一场

不哭不散说离伤

爱你爱到泪两行

哭湿枕头又何妨

男：越爱越深越疯狂

一首情歌两人唱

和你相遇老地方

合：莫让爱人哭断肠

女：好久没联络

现在你过得怎么样

忘不掉昨日的时光

男：就算各一方

依然把你放心上

这段情怎能说忘就忘

女：相逢的泪水

忍不住流淌

男：多情的话语

合：已变的凄凉

女：无怨无悔爱一场

不哭不散说离伤

爱你爱到泪两行

哭湿枕头又何妨

男：越爱越深越疯狂

一首情歌两人唱

和你相遇老地方

合：莫让爱人哭断肠

女：无怨无悔爱一场

不哭不散说离伤

爱你爱到泪两行

哭湿枕头又何妨

男：越爱越深越疯狂

一首情歌两人唱

和你相遇老地方

莫让爱人哭断肠

女：无怨无悔爱一场

不哭不散说离伤

爱你爱到泪两行

哭湿枕头又何妨

男：越爱越深越疯狂

一首情歌两人唱

和你相遇老地方

合：莫让爱人哭断肠


`;

/*变量 ：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;
}



/*监听播放进度*/
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); /*获得歌词数组*/
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>

<script>
let ctx = canv.getContext('2d');
let ww = canv.width =1164, hh = canv.height =620;
let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}}

let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'),vid.pause()) : (papa.style.setProperty('--state', 'running'),vid.play());
vid.playbackRate = 0.5;
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

</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;
            // 透明度还原
            image0.style.opacity = ''; image1.style.opacity = '';image2.style.opacity = '';image3.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 image1 = document.getElementById("testImg1"),
image2 = document.getElementById("testImg2"),
image3 = document.getElementById("testImg3"),
image = document.getElementById("testImg"),
image0 = document.getElementById("ant"),
    button = document.getElementById("mplayer");
    if (image0&&image1&&image2&&image3&&image && button) {
    button.onclick = function() {
      if (this.value == '') {
            image0.play();image1.play();image2.play();image3.play(); image.classList.remove('stop');
            this.value = '.';
      } else {
         image0.stop(); image1.stop();image2.stop();image3.stop();image.classList.add('stop');
            this.value = '';
      }
    };
}

</script>
</td></tr></table>

马黑黑 发表于 2023-6-21 12:11

播放控制器，背景图可以换一张背景透明的，要么就是用滤镜处理一下

岩新新 发表于 2023-6-21 12:43

马黑黑 发表于 2023-6-21 12:11
播放控制器，背景图可以换一张背景透明的，要么就是用滤镜处理一下

谢谢指导！

红影 发表于 2023-6-21 16:30

歌曲好听，背景图有些虚呢，还有点比例失真{:4_173:}

梦缘 发表于 2023-6-21 17:01

问好老师，欣赏精彩佳作，谢谢分享，点赞！{:4_187:}
页: [1]
查看完整版本: 高安、杭娇 - 一生无悔