论坛 › 欢乐水吧 › 我们就到这里好不好 - 李英

亚伦影音工作室 发表于 2023-7-7 07:14

我们就到这里好不好 - 李英

本帖最后由 亚伦影音工作室 于 2023-7-11 12:29 编辑 <br /><br /><style>
#papa {
        margin: 100px -300px;
        width: 1164px;
        height: 640px;
          background: linear-gradient(to right, #dd1818,#00ff00,#222278);
        box-shadow: 0 0 0px #000;
        position: relative;
        z-index: 1;overflow:hidden;
        --state: paused;
}
css-doodle { position: absolute; }

.photo {width: 100%;
height: 100%;
position: absolute;z-index: 3;

top:0px; left:0px;
-webkit-mask-image: radial-gradient(black 20% ,transparent 70%);
opacity: 0;

animation: round 180s linear infinite;}

@keyframes round{0% {
-webkit-transform:rotate(0)scale(1.5)translate(10%,0%);
opacity:0}
5% {
-webkit-transform:rotate(0)scale(1.5)translate(-10%,0%);
opacity:1}
6% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,10%);
opacity:1}
7% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,-10%);
opacity:1}
8% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1}
9% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:1}
10% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:0}
}

img:nth-child(1) {animation-delay: 168s;}
img:nth-child(2) {animation-delay: 156s;}
img:nth-child(3) {animation-delay: 144s;}
img:nth-child(4) {animation-delay: 132s;}
img:nth-child(5) {animation-delay: 120s;}
img:nth-child(6) {animation-delay: 108s;}
img:nth-child(7) {animation-delay: 96s;}
img:nth-child(8) {animation-delay: 84s;}
img:nth-child(9) {animation-delay: 72s;}
img:nth-child(10){animation-delay: 60s;}
img:nth-child(11){animation-delay: 48s;}
img:nth-child(12){animation-delay: 36s;}
img:nth-child(13){animation-delay: 24s;}
img:nth-child(14) {animation-delay: 12s;}
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;}


#canv {mix-blend-mode: lighten;
        position: absolute;
        display: block;
        height: 100%;
        position: relative;
        cursor: pointer;
        z-index: 5;opacity: 0.8;
}
#vid { display: none; }

#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #ff0000, #80ef03);
        position: absolute;z-index: 6;
        left: 50%;
        transform: translate(-50%);
        top: 85%;
        font:normal 3.5em FangSong;font-weight:1000;
        color: #055306;
        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%; } }

.wenzi { position: absolute; left: 12%; top: 18%; z-index: 10; color:#ffffff; font: bold 20px/20px 'FangSong',serif;opacity: 1; }
#papa:hover #fullscreen { display:block ;}


#fullscreen { position: absolute; top:2%; left:5%;color:#FFffff; font:normal2.2em华文行楷; opacity: 1; cursor: pointer; z-index: 6}



</style>

<div id="papa">
      <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>

<div id="testImg" >
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/282a3dca7183aa771d801cce4f1aec24.jpg" />

<img alt="" class="photo"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/efde44f91eb6e8b06b18397c01c9310c.jpg" />

<img alt=""class="photo"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/de0740006c22e86ef4b5bee531ef72f3.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/abe39a75e4e867b8b42277909f76d650.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a9903bbafba80f349d5c6f787021ab4d.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/23e45de66239ff0e5c4d35f5812be39f.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c8eff17a7a0d1132a001fc899d9d51e4.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/29c50e716edbe7f5bd4004c1fae3a5cc.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6c70a2a7c702f60b406184523e77953b.jpg" />

<img alt="" class="photo"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9c15530cf71f6b96e31e7ee10b9b350d.jpg" />

<img alt=""class="photo"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7a67dece8aff3b212fa180d8c1f7eac5.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9fca3d32997953b9d0dfe55db8026ec8.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/36c861bb19ece2a113f486f908e2e1e2.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b0bc2e99be5d6b924310d19628e8f838.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/197bfe0dc55aab7dd86979c27555df70.jpg" />

</div>

        <divstyle="width: 400px;height: 320px;overflow:hidden;margin: 3% 70%;position: absolute;" id="but">
<css-doodleid="mplayer">
          :doodle {
                @grid: 2 / 300px 60px;
            position: absolute;z-index: 40;
                color: var(--color);
            transform: scale(1);
                --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color:#ffffff; --state: paused;
      }
      /* 时间信息 : 左 */
      @nth(1) {
                @place: 25% 80%;
                :after { content: var(--ttmsg1); }
      }
      /* 控制器 */
      @nth(2) {
                @size: var(--size);
                @shape:windmill;
                @place: 50% 35%;

             background:var(--color);
                animation: rot 6s infinite linear var(--state);
      }
      /* 时间信息 : 右 */
      @nth(3) {
                @place: 75% 80%;
                :after { content: var(--ttmsg2); }
      }
   /* 进度条 */
      @nth(4) {
                @place: 50% 80%;
                @size: 100% 2px;
                background: #aaaaaa;
               display: grid;
                place-items: center start;
                :before {
                        content: '';
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
      }
      @keyframes rot { to { transform: rotate(1turn); } }

</css-doodle>
<div class="wenzi">我们就到这里好不好</div>

</div>

<canvas id="canv"></canvas>
        <span id="fullscreen">全屏观赏</span>
<video id="vid" src="https://video-js.51miz.com/preview/video/00/00/13/74/V-137480-7AE85F53.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://www.qqmc.com/mp3/music282436228.mp3" autoplay loop></audio>

</div>

<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
        ctx.drawImage(vid, 0, 0, ww, hh);
        if(!vid.paused) {
                requestAnimationFrame(loop);
                return;
        }
}
let mState = () => aud.paused ? ( mplayer.style.setProperty('--state', 'paused'), vid.pause()) : ( mplayer.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

</script>

<script>

(function() {
      let script = document.createElement('script');
      script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
      document.head.appendChild(script);
      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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('timeupdate', () => {
                mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
                mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
      });
      mplayer.onclick = (e) => {
                if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY < 46) aud.paused ? aud.play() : aud.pause();
                if(e.offsetY > 46) aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
      }
})();


</script>

<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;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
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); /*获得歌词数组*/
})();

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


var image = document.getElementById("testImg"),
    button = document.getElementById("but");
   
if (image.classList && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
</script>

红影 发表于 2023-7-7 09:35

漂亮的AI美女轮播，按暂停后能让所有动态都能停下。这个制作真棒。给亚伦老师点赞{:4_199:}

醉美水芙蓉 发表于 2023-7-7 21:25

小辣椒 发表于 2023-7-7 23:28

亚伦你这个歌词上的意思是只能你做这个代码帖啊。。。。

上次还表扬你代码不加密，那你不让别人做干脆代码加密算了，不会加密我教你{:4_170:}

亚伦影音工作室 发表于 2023-7-8 05:03

小辣椒 发表于 2023-7-7 23:28
亚伦你这个歌词上的意思是只能你做这个代码帖啊。。。。

上次还表扬你代码不加密，那你不让别人做干脆代 ...

只是玩笑而已，其实是充当歌词填空！

小文 发表于 2023-7-8 08:36

好美

焱鑫磊 发表于 2023-7-13 19:59

欣赏老师佳作！{:4_187:}

查看完整版本: 我们就到这里好不好 - 李英