论坛 › 欢乐水吧 › 追不上的青春 (DJ版) 歌手：东煜 （学习套用黑黑烛影 效果）

小辣椒 发表于 2024-6-22 21:42

追不上的青春 (DJ版) 歌手：东煜 （学习套用黑黑烛影 效果）

<style>
        #tz { margin: 150px 0 30px calc(50% - 805px); width: 1449px; height: 742px; background: url('https://wj.zp68.com/lxx/yunhua/2024/06/22/GIF.gif') no-repeat center/cover; border-radius: 20px 0; box-shadow: 3px 3px 12px black; z-index: 1; position: relative; }
        #tz::before { content: attr(data-lrc); position: absolute; bottom: 40px; width: 100%; height: 60px; left: 380px; text-align: center; font: normal 38px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; filter: drop-shadow(-1px -3px 2px cyan); }
        #player { left: calc(42% - 50px);top: 500px; width: 120px; height: 120px; filter: drop-shadow(0 0 40px cyan); cursor: pointer; transition: .5s; position: absolute; display: grid; place-items: center; animation: rot 8s linear infinite var(--state); opacity: .50;}

#dt3{ position: absolute; width: 180px; height: 400px; top: 350px; left: 50px; }
#dt4{ position: absolute; width: 244px; height: 163px;bottom: 0px; left: 0px; }
#dt5{ position: absolute; width: 32px; height: 32px; top: 75px; left: 925px; }

        #vid { position: absolute; top: 25%;   right: 25%; width: 260px; height: 260px; clip-path: circle(50%); object-fit: cover; mix-blend-mode: screen; opacity: .95; pointer-events: none; }
        #player:hover { width: 100px; height: 100px; filter: hue-rotate(180deg) drop-shadow(0 0 40px cyan); }
        c-c { position: absolute; width: 120%; height: 120%; border: none; content: url('https://wj.zp68.com/lxx/yunhua/2024/06/22/03.gif') ;border-radius: 100% 50%; opacity: .75; }
        @keyframes rot { to { transform: rotate(1turn); }

</style>

<div id="tz" data-lrc="都要好好爱自己">

<img id="dt4" src="https://wj.zp68.com/lxx/yunhua/2024/06/22/37.png" alt="" />
<img id="dt3" src="https://wj.zp68.com/lxx/yunhua/2024/06/22/1.png" alt="" />

<img id="dt5" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" />

        <audio id="aud" src="https://file.uhsea.com/2406/ec7969f4a8f92564751b5d87013ef9f73U.mp3" autoplay loop></audio>
        <video id="vid" class="vid" src="https://lk999.oss-cn-guangzhou.aliyuncs.com/How%20Could%20I%20Love%20You.mp4" autoplay loop muted disablePictureInPicture></video>
        <div id="player"></div>
</div>

<script>
var curkey = 0, lrcAr = [], total = 5;
Array.from({length: total}).forEach((c,k) => {
        c = document.createElement('c-c');
        c.style.cssText += `
                transform: rotate(${360 / total * k}deg);
                border-color: #${Math.random().toString(16).substring(2,8)};
        `;
        player.appendChild(c);
});
var getAr = (text) => {
        var ar = text.trim().split('\n');
        ar.sort();
        var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
        ar.forEach(item => {
                let result = item.match(reg);
                let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                lrcAr.push(.trim()]);
        });
};
var mState = () => {
        tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
        player.title = ['暂停','播放'][+aud.paused];
        aud.paused ? vid.pause() : vid.play();
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
        if(curkey > lrcAr.length - 1) return;
        if(aud.currentTime >= lrcAr) {
                tz.dataset.lrc = lrcAr;
                curkey ++;
        }
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();

var lrc = `作词：东煜 | 作曲：东煜\n我用了四季\n想要去成长\n荒芜的青春\n我再也追不上\n操场上的风\n经过我身边\n你成了我的整个夏天\n你微笑的双眼\n把我的心点燃\n你就是我贪恋的人间\n那天你坐在\n自行车后面\n夕阳映红你的侧脸\n风把你的温柔\n吹向此间少年\n你慢慢走出我的视线\n你的目光\n暖一片星光\n我的怀里\n淡淡余香\n一辈子那么长\n只记得你的笑\n那就是你\n最好的模样\n年少时光\n摇摇晃晃\n大把的时间\n不够彷徨\n我用了四季\n想要去成长\n荒芜的青春\n我再也追不上\n~Music~\n那天你坐在\n自行车后面\n夕阳映红你的侧脸\n风把你的温柔\n吹向此间少年\n你慢慢走出我的视线\n你的目光\n暖一片星光\n我的怀里\n淡淡余香\n一辈子那么长\n只记得你的笑\n那就是你\n最好的模样\n年少时光\n摇摇晃晃\n大把的时间\n不够彷徨\n我用了四季\n想要去成长\n荒芜的青春\n我再也追不上\n你的目光\n暖一片星光\n我的怀里\n淡淡余香\n一辈子那么长\n只记得你的笑\n那就是你\n最好的模样\n年少时光\n摇摇晃晃\n大把的时间\n不够彷徨\n我用了四季\n想要去成长\n荒芜的青春\n我再也追不上\n谢谢欣赏\n`;
getAr(lrc);
</script>

小辣椒 发表于 2024-6-22 21:43

@马黑黑

黑黑套用玩一个，这个播放器我放在扇子的圈里面，感觉小了一点{:4_173:}

梦油 发表于 2024-6-22 21:56

不留神还真不知道播放器在那小扇子里。{:5_106:}

小辣椒 发表于 2024-6-22 21:57

梦油 发表于 2024-6-22 21:56
不留神还真不知道播放器在那小扇子里。

哈哈~~是的，刚才想放大一点，感觉还是小一点，界面不受影响

红影 发表于 2024-6-22 22:05

亲爱的把频谱效果和另一个视频效果都用上了呢，漂亮。扇子里的小播也很漂亮。
欣赏亲爱的好帖{:4_199:}

红影 发表于 2024-6-22 22:07

咋不让视频暂停啊，这样点击小播后都感觉不到暂停了{:4_173:}

梦油 发表于 2024-6-22 22:12

小辣椒 发表于 2024-6-22 21:57
哈哈~~是的，刚才想放大一点，感觉还是小一点，界面不受影响

我看，在这件作品中还是小点好。

小文 发表于 2024-6-22 22:19

喜欢

马黑黑 发表于 2024-6-22 22:24

小辣椒 发表于 2024-6-22 21:43
@马黑黑

黑黑套用玩一个，这个播放器我放在扇子的圈里面，感觉小了一点

你可以弄大一点的

小辣椒 发表于 2024-6-22 22:35

马黑黑 发表于 2024-6-22 22:24
你可以弄大一点的

改大了一点，但放大的尺寸没有修改，会很大了

马黑黑 发表于 2024-6-22 22:42

小辣椒 发表于 2024-6-22 22:35
改大了一点，但放大的尺寸没有修改，会很大了

额

起个网名好难 发表于 2024-6-22 22:59

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

梦江南 发表于 2024-6-23 11:31

漂亮，欣赏学习！

小辣椒 发表于 2024-6-23 14:08

马黑黑 发表于 2024-6-22 22:42
额

我还是把放大的尺寸改了，这样效果好一点

小辣椒 发表于 2024-6-23 14:09

起个网名好难 发表于 2024-6-22 22:59


问好难难，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-6-23 14:09

梦江南 发表于 2024-6-23 11:31
漂亮，欣赏学习！

问好梦江南，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-6-23 14:10

小文 发表于 2024-6-22 22:19
喜欢

问好小文，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-6-23 14:11

梦油 发表于 2024-6-22 22:12
我看，在这件作品中还是小点好。

梦油，我现在改大了，怕别人会找不到按钮，因为我会发朋友，他们是手机看的，手机播放器就更加小了

小辣椒 发表于 2024-6-23 14:12

红影 发表于 2024-6-22 22:07
咋不让视频暂停啊，这样点击小播后都感觉不到暂停了

亲爱的，我是套用黑黑的代码，没有按钮控制视频的，你有时间帮忙修改一下吧

小辣椒 发表于 2024-6-23 14:13

红影 发表于 2024-6-22 22:05
亲爱的把频谱效果和另一个视频效果都用上了呢，漂亮。扇子里的小播也很漂亮。
欣赏亲爱的好帖

按钮改大了，太小了怕别人找不到{:4_173:}

查看完整版本: 追不上的青春 (DJ版) 歌手：东煜 （学习套用黑黑烛影 效果）