论坛 › 欢乐水吧 › 被伤的心越来越痛-李英

亚伦影音工作室 发表于 2023-7-15 16:55

被伤的心越来越痛-李英

本帖最后由 亚伦影音工作室 于 2023-7-29 16:56 编辑 <br /><br /><style>
#papa {
        margin: 100px -300px;
        width: 1164px;
        height: 640px;
          background: linear-gradient(to right, #000000,#000080,#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 { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:82%; transform: translate(-50%, 10px);font:normal 3em FangSong; font-weight:1000;color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%) drop-shadow( 2px 2px 0px #000000); z-index: 10; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; 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); }
@keyframes cover1{   0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);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(-100deg)rotatex(100deg);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%;}
}

.wenzi { position: absolute; left: 18%; 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="被伤的心越来越痛">被伤的心越来越痛</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://imgs-qn.51miz.com/preview/video/00/00/12/23/V-122382-2B421D95.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://www.qqmc.com/mp3/music285080223.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-15 17:07

亚伦好~~

这个图片转换效果特别流畅自然，非常的美，漂亮{:4_199:}

小辣椒 发表于 2023-7-15 17:10

感觉这个歌词的单色出来也是效果不错{:4_178:}

小辣椒 发表于 2023-7-15 17:11

亚伦会动脑子，不断的修改更新，让作品更加完美，赞的！

樵歌 发表于 2023-7-15 18:15

欣赏高质量影音佳作！

红影 发表于 2023-7-15 19:33

好漂亮的制作，同步歌词也很有特色。欣赏亚伦老师好帖{:4_199:}

醉美水芙蓉 发表于 2023-7-15 22:14

查看完整版本: 被伤的心越来越痛-李英