论坛 › 欢乐水吧 › 小三 歌手：冷漠 （学习套用黑黑永远的长安粒子效果）

小辣椒 发表于 2024-7-5 21:17

小三 歌手：冷漠 （学习套用黑黑永远的长安粒子效果）

<style>
#tz { margin: 130px 0; left: 50%; transform: translateX(calc(-50% - 81px)); width: 1436px; height: 740px; overflow: hidden; background: Yellow url('https://wj1.zp68.com:812/lxx/yunhua/2022/02/01/88F.gif') no-repeat center/cover; border: 10px inset lightblue; z-index: 1; position: relative; --distance: 1280px; }

#dt2{ position: absolute; width:32px; height: 32px; top: 28px; left: 38px; }
#dt3{ position: absolute; width: 140px; height: 140px; top: 60%; left: 55%; }

#tz::after {content: attr(data-lrc); position: absolute; right: -320px; bottom: 40px; width: 100%; height: 60px; text-align: center; font: normal 28px/40px sans-serif; color: transparent;text-shadow: 1px 1px 1px rgba(169,169,169,.8);background: radial-gradient(pink, white, orange) center/120px 60px; -webkit-background-clip: text;}
li-zi { position: absolute; top: 360px; right:-900px; animation: fly 20s cubic-bezier(0.09, -0.12, 0.92, 0.47) infinite var(--state); }
#player { position: absolute; left: calc(53.5% - 60px); top: 22%; width: 100px; height: 100px; cursor: pointer; filter: hue-rotate(30deg); transition: .5s; animation: rot 8s linear infinite var(--state); }
#player:hover { filter: hue-rotate(0); }
@keyframes fly { to { transform: rotate(110deg) translateX(var(--distance)); } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tz" class="tz" data-lrc="HUACHAO">
<img id="dt3" src="https://wj1.zp68.com:812/lxx/yunhua/2022/02/01/01.gif" alt="" />
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" />

      <audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/2022/02/01/x3.mp3" autoplay loop></audio>
      <img id="player" alt="" title="播放" src="https://wj1.zp68.com:812/lxx/yunhua/2022/02/01/ann.png" />

</div>

<script>
new Array(total = 40).fill(0).map((i,k) => {
      i = document.createElement('li-zi');
         i.innerHTML = ['&#127801;;','&#127801;;','&#127801;;'];
      i.style.cssText += `
                left: ${Math.floor(-10 * Math.random()) + 10}%;
                animation-delay: -${Math.random() * 40}s;
      `;
      tz.prepend(i);
});
var curkey = 0, lrcAr = [];
        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.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
      papa: '#tz',
      css: 'bottom: 40px; left: 52%; transform: translate(-50%); --color: DarkGray; --fsBg: transparent;',
});
window.onresize = () => tz.style.setProperty('--distance', tz.offsetWidth + 'px');
        aud.onseeked = () => curkey = 0;
       
        aud.ontimeupdate = () => {
                if(curkey > lrcAr.length - 1) return;
                if(aud.currentTime >= lrcAr) {
                        tz.dataset.lrc = lrcAr;
                        curkey ++;
                }
        };
        player.onclick = () => aud.paused ? (aud.play(), ani.play()) : (aud.pause(), ani.pause());
        var lrc = `
飞越悲伤的墙
歌曲名称：小三
歌手： 冷漠
词：陈伟
曲：陈伟
编曲：牛渡
虽然我没有说出来
其实我早已有了预感
给不了你幸福的现在
是我如今最大的无奈
等着你对我说出来
你要的不只是我的爱
我用沉默面对你的坦白
曾经的快乐都烟消云散
终于你做了别人的小三
我也知道那不是因为爱
城市的夜晚如此的灿烂
只是没有你在身边陪伴
终于你做了别人的小三
从此我不再是你的港湾
当你依偎在他的胸怀
是否已忘记我曾给过的爱
~Music~
等着你对我说出来
你要的不只是我的爱
我用沉默面对你的坦白
曾经的快乐都烟消云散
终于你做了别人的小三
我也知道那不是因为爱
城市的夜晚如此的灿烂
只是没有你在身边陪伴
终于你做了别人的小三
从此我不再是你的港湾
当你依偎在他的胸怀
是否已忘记我曾给过的爱
终于你做了别人的小三
我也知道那不是因为爱
城市的夜晚如此的灿烂
只是没有你在身边陪伴
终于你做了别人的小三
从此我不再是你的港湾
当你依偎在他的胸怀
是否已忘记我曾给过的爱
当你依偎在他的胸怀
是否已忘记我曾给过的爱
☆谢谢欣赏☆
`;
        getAr(lrc);
</script>

小辣椒 发表于 2024-7-5 21:18

@马黑黑

套用学习做一个，只是这个歌曲名称好玩，以前喜欢冷漠的歌，现在看见就做一次

马黑黑 发表于 2024-7-5 21:33

小辣椒 发表于 2024-7-5 21:18
@马黑黑

套用学习做一个，只是这个歌曲名称好玩，以前喜欢冷漠的歌，现在看见就做一次

{:4_199:}

红影 发表于 2024-7-5 21:37

这背景好漂亮，粒子的运用也很惊艳。欣赏亲爱的好帖{:4_199:}

小辣椒 发表于 2024-7-5 21:47

马黑黑 发表于 2024-7-5 21:33


{:4_180:}

小辣椒 发表于 2024-7-5 21:48

红影 发表于 2024-7-5 21:37
这背景好漂亮，粒子的运用也很惊艳。欣赏亲爱的好帖

图图是岁月的AE制作，所以比较漂亮了，这个粒子是最最简单的那种了

红影 发表于 2024-7-5 23:20

小辣椒 发表于 2024-7-5 21:48
图图是岁月的AE制作，所以比较漂亮了，这个粒子是最最简单的那种了

粒子配上这样作品，特别出彩{:4_199:}

樵歌 发表于 2024-7-6 07:01

背景图图选择得极好，把小三心中的凄苦与那男人的无奈表现得跟歌曲的伤感高度一至，小辣椒对音乐的理解的很有独到的理解！{:4_178:}

樵歌 发表于 2024-7-6 07:02

只是那小猫咪的眼神儿有调侃的意味{:4_170:}

梦江南 发表于 2024-7-6 08:09

真棒，赞！

马黑黑 发表于 2024-7-6 08:17

小辣椒 发表于 2024-7-5 21:47


谢茶

梦油 发表于 2024-7-6 09:27

小三，永远的苦楚。

辫子哥哥 发表于 2024-7-6 23:41

小三在哪{:4_170:}

起个网名好难 发表于 2024-7-7 05:55

{:5_116:}

查看完整版本: 小三 歌手：冷漠 （学习套用黑黑永远的长安粒子效果）