论坛 › 音乐沙龙 › 《南方小土豆》（学习黑黑《永远的长安》代码效果）

红影 发表于 2024-7-1 10:02

《南方小土豆》（学习黑黑《永远的长安》代码效果）

<style>
#tz { margin: 30px 0; left: 50%; transform: translateX(calc(-50% - 81px)); width: 1280px; height: 660px; overflow: hidden; background: lightblue url('https://pic.imgdb.cn/item/667eabf2d9c307b7e9d67023.jpg') no-repeat center/cover; border: 10px inset lightblue; z-index: 1; position: relative; --distance: 1280px; }
#tz::after {content: attr(data-lrc); position: absolute; bottom: 30px; right: -320px; width: 100%; height: 60px; text-align: center; font: normal 36px/60px sans-serif; color: transparent;text-shadow: 2px 2px 2px rgba(246,242,60,.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(50% - 60px); top: 30px; width: 120px; height: 120px; 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">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2127807344" autoplay loop></audio>
      <img id="player" alt="" title="播放" src="https://pic.imgdb.cn/item/667eb97dd9c307b7e9f24b5b.png" />
</div>

<script>
new Array(total = 80).fill(0).map((i,k) => {
      i = document.createElement('li-zi');
         i.innerHTML = ['&#128142;','&#127752;','⛄','&#129364;','&#128166;','&#128149;'];
      i.style.cssText += `
                left: ${Math.floor(20 * Math.random()) - 20}%;
                animation-delay: -${Math.random() * 20}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: 50%; transform: translate(-50%); --color: yellow; --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 = `
南方小土豆\n演唱：韩帅\n作词：尹龙\n作曲：苏佑雪\n编曲：九天音乐工作室\n和声：沐花音\n混音：九天音乐工作室\n制作人： DJheap九天\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南来北往都是客（ qie）\n聚八方宾朋\n听完我心里嘭嘭\n你让我挺感动\n欣赏你高大的身影\n和灿烂的笑容\n后来的故事很甜蜜\n走过春夏秋冬\n你喜欢叫我小土豆儿\n我把你叫大葱\n我这南方的小土豆子\n爱上北方的葱\n你说我可爱小模儿样是\n贼拉拉招人疼\n亲亲抱抱举高高\n是样样它都精通啊\n虽然我没有大长腿儿\n你也要把我放心中\n我这南方的小土豆子\n爱上北方的葱\n你这北方的老爷们儿\n还挺会把人疼\n白山黑水美如画\n这旮迎来四季的风啊\n南来北往都是客（ qie）\n聚八方宾朋
`;
        getAr(lrc);
</script>

红影 发表于 2024-7-1 10:04

想用这个路径呼应一下泼水成冰的外轮廓。
那个泼水成冰在手机视频里看过，好神奇啊，在寒冷的北方，一盆水一泼，就直接变成了冰的模样{:4_173:}

红影 发表于 2024-7-1 10:07

本来想把那些粒子全用土豆的，发现太单调，还是这样有雪人、彩虹、心、水滴之类的五颜六色的好。
感谢@马黑黑 的代码，让我把这一奇观能做成帖子{:4_187:}

马黑黑 发表于 2024-7-1 15:11

结合场景样式设计路径，这个创意得分

梦油 发表于 2024-7-1 17:01

《南方小土豆》挺好听的。

梦江南 发表于 2024-7-1 17:11

欣赏影子的精彩作品！辛苦了！{:4_187:}

醉美水芙蓉 发表于 2024-7-1 17:13

樵歌 发表于 2024-7-1 18:03

师妹每次制作有很创意。旋转的粒子突出了小土豆和东北小调红扇子的特色！

小辣椒 发表于 2024-7-1 20:42

亲爱的，你这个是《永远的长安》的效果，我好像都忘记有没有去看过教程{:4_198:}

小辣椒 发表于 2024-7-1 20:43

先送上掌声 鲜花，然后去看看教程再回过来欣赏

南无月 发表于 2024-7-1 20:53

好欢快的乐曲。。
粒子更改了方向和弧度，这个创意太赞了{:4_187:}

南无月 发表于 2024-7-1 20:55

把泼水成冰的效果完美展示出来了。。
能根据实际图片设计弧度，非常厉害。。{:4_204:}

红影 发表于 2024-7-1 23:19

马黑黑 发表于 2024-7-1 15:11
结合场景样式设计路径，这个创意得分

谢谢黑黑，路径如何起作用的还是问了你才知道的{:4_187:}

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

梦油 发表于 2024-7-1 17:01
《南方小土豆》挺好听的。

特别好玩，这个名字的歌曲还挺多，都是不一样的。估计都是哈尔滨出圈后出来的歌曲。在里面选了这首{:4_173:}

红影 发表于 2024-7-1 23:21

梦江南 发表于 2024-7-1 17:11
欣赏影子的精彩作品！辛苦了！

多谢梦江南鼓励，其实也是学习套用代码呢{:4_187:}

红影 发表于 2024-7-1 23:21

醉美水芙蓉 发表于 2024-7-1 17:13
欣赏红影漂亮的音画！

多谢水芙蓉美女鼓励{:4_187:}

红影 发表于 2024-7-1 23:26

樵歌 发表于 2024-7-1 18:03
师妹每次制作有很创意。旋转的粒子突出了小土豆和东北小调红扇子的特色！

这个是想起看过的视频，才想起弄这个的，看了哈尔滨文旅火爆出圈那些好玩的摔跟头视频，听到北方人亲切称呼南方人是小土豆，觉得特别好玩{:4_173:}

红影 发表于 2024-7-1 23:27

小辣椒 发表于 2024-7-1 20:42
亲爱的，你这个是《永远的长安》的效果，我好像都忘记有没有去看过教程

黑黑的那个帖子非常有特色，底图选得特别好的那个，亲爱的快去看看{:4_187:}

红影 发表于 2024-7-1 23:28

小辣椒 发表于 2024-7-1 20:43
先送上掌声 鲜花，然后去看看教程再回过来欣赏

谢谢亲爱的鼓励{:4_185:}

马黑黑 发表于 2024-7-1 23:29

红影 发表于 2024-7-1 23:19
谢谢黑黑，路径如何起作用的还是问了你才知道的

多做几次就彻底上手的

查看完整版本: 《南方小土豆》（学习黑黑《永远的长安》代码效果）