论坛 › 动画音画 › 《丢了你》唐子臣

焱鑫磊 发表于 2023-6-10 09:37

《丢了你》唐子臣

本帖最后由 焱鑫磊 于 2023-6-28 11:42 编辑 <br /><br /><style>
#papa {
        margin: 100px -280px;
        width: 1164px;
        height: 620px;
        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://pic.imgdb.cn/item/6483d1991ddac507cc103de3.jpg')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://www.yiyuen.com/e/file/view/591049" width="100%" height="100%"></div>
<div id='dt2'><img id="testImg2" src="https://www.yiyuen.com/e/file/view/591049" width="100%" height="100%"></div>
<div id='dt3'><img id="testImg3" src="https://www.yiyuen.com/e/file/view/591049" width="100%" height="100%"></div>
<div id="testImg" >
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6483527f1ddac507cc7d06d7.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648352a51ddac507cc7d3bc2.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648352c71ddac507cc7d64b0.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648352df1ddac507cc7d8843.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648352f81ddac507cc7daf84.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648353171ddac507cc7dd711.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648353321ddac507cc7dfa65.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6483534c1ddac507cc7e1b32.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648353651ddac507cc7e3cbf.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6483537f1ddac507cc7e5fe6.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6483539c1ddac507cc7e8a0d.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648353b71ddac507cc7eb1b6.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648353da1ddac507cc7edc23.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/648353f31ddac507cc7f072e.jpg" />
<img alt="" class="photo" src="https://pic.imgdb.cn/item/6483540d1ddac507cc7f2a1a.jpg" />
</div>
<canvas id="canv"></canvas>
<div id="mplayer"><img id="ant" src="https://pic.imgdb.cn/item/6483d05f1ddac507cc0ea83a.gif" width="100%" height="100%"></div>
<div data-lrc="焱鑫磊博客" id="lrc">焱鑫磊博客</div>
</div>
<audio id="aud" src="https://i.mp3.wf/view.php/1b1999b665d54a6a97d4db9ccfc2d1e6.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 = `
《丢了你》唐子臣
词/曲：李寻欢
LRC歌词制作：焱鑫磊
莫名伤感孤寂
花瓣凋零无声息
空荡房间里
找不到你的身影
要如何忘记那段
无法抹去的回忆
心底的秘密
只有你能够开启
迎面拂过冷空气
漫无目的的寻栖身地
不想一个人
停留在这城市里
眼角的泪无法抹去
最怕空气突然安静
我的世界里
已经没了你
我总是习惯黑夜里想你
夜深了还没有睡意
虽然我爱你是我的决定
还要试着把你忘记
我总想能够再次抱紧你
告诉你我真没关系
再也回不去
丢了你丢了过去
迎面拂过冷空气
漫无目的的寻栖身地
不想一个人
停留在这城市里
眼角的泪无法抹去
最怕空气突然安静
我的世界里
已经没了你
我总是习惯黑夜里想你
夜深了还没有睡意
虽然我爱你是我的决定
还要试着把你忘记
我总想能够再次抱紧你
告诉你我真没关系
再也回不去
丢了你丢了过去
我总是习惯黑夜里想你
夜深了还没有睡意
虽然我爱你是我的决定
还要试着把你忘记
我总想能够再次抱紧你
告诉你我真没关系
再也回不去
丢了你丢了过去

`;

/*变量 ：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>
亚伦老师代码制作   致谢！

红影 发表于 2023-6-10 11:19

敲鼓小人的亚伦老师帖子里的，这个帖子里的美人是焱鑫磊自己配的呢，真漂亮{:4_199:}

焱鑫磊 发表于 2023-6-10 13:02

红影 发表于 2023-6-10 11:19
敲鼓小人的亚伦老师帖子里的，这个帖子里的美人是焱鑫磊自己配的呢，真漂亮

是的红影！学习制作。{:4_187:}

红影 发表于 2023-6-10 13:50

焱鑫磊 发表于 2023-6-10 13:02
是的红影！学习制作。

做得很棒{:4_199:}

樵歌 发表于 2023-6-10 18:50

竟是越做越好看， 越是神奇了{:4_199:}

焱鑫磊 发表于 2023-6-10 18:52

樵歌 发表于 2023-6-10 18:50
竟是越做越好看， 越是神奇了

问候樵歌好！{:4_204:}

马黑黑 发表于 2023-6-10 22:54

欣赏

焱鑫磊 发表于 2023-6-10 23:19

马黑黑 发表于 2023-6-10 22:54
欣赏

老师驾到！{:4_431:}

梦缘 发表于 2023-6-11 17:34

好美的图，老师的分享好精彩。{:4_190:}

焱鑫磊 发表于 2023-6-11 18:55

梦缘 发表于 2023-6-11 17:34
好美的图，老师的分享好精彩。

问候梦缘好！{:4_187:}

查看完整版本: 《丢了你》唐子臣