南无月 发表于 2024-4-24 18:02

春日信笺（学习黑师20240423《Blissful Mind》粒子随鼠标变化效果）

本帖最后由 南无月 于 2024-4-25 17:11 编辑 <br /><br /><style>
        #papa { margin: 130px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/423crxj0.webp') no-repeat center/cover; display: grid; place-items: center; overflow: hidden; user-select: none; position: relative; }
        #player { position: absolute; bottom: 170px; right:460px; width: 120px; height: 180px; cursor: pointer; z-index: 999; }
.vid { position: absolute; bottom: 170px; right:460px;width: 200px; height: 200px; object-fit: cover; mix-blend-mode: screen; }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2139714236" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/74/5b49906dc4428.mp4" loop muted></video>
        <div id="player"></div>
</div>

<script>
//函数 ：加载JS资源
var loadJs = (file, callback) => {
        let sc = document.createElement('script');
        sc.src = file;
        sc.charset = 'utf-8';
        document.body.appendChild(sc);
        sc.onload = () => callback();
};

//需要加载的JS资源src
var js1 = 'https://638183.freep.cn/638183/web/api/lrc.js',
        js2 = 'https://638183.freep.cn/638183/web/js/dot-lz.js';

//歌词js先加载并用回调方式配置参数
loadJs(js1, () => {
        LRC({
                papa: '#papa',
                lrcAr: lrcAr,
                btn: '#player',
                lrc_css: 'bottom: 26px; --bg: linear-gradient(rgba(250,250,250,.25),rgba(100,200,250,.65)); opacity: .6;font-size: 26px;color: #fff;',
        });
});

loadJs(js2, () => {}); //粒子js后加载


var lz = {papa: '#papa', total: 42, r: 6, max_r: 24, step: 0.5, color: '', opacity: .3, move: true};

//歌词数组
let lrcAr = [
        [-1.21,"单曲： 春日信笺",0.7],
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

papa.onclick = () => lz.move =!aud.paused; //控制小球

</script>

南无月 发表于 2024-4-24 18:03

@马黑黑
老师来瞧一眼，把粒子改成浅红色。
看着更温暖一些，没那么清冷。。。
歌词也改了同色。

愤怒的葡萄 发表于 2024-4-24 18:40

挺不错的，欣赏了。

马黑黑 发表于 2024-4-24 20:41

处理图片的功夫又有长进，帖子设计也非常完好。点32个赞。

南无月 发表于 2024-4-24 21:03

愤怒的葡萄 发表于 2024-4-24 18:40
挺不错的，欣赏了。

感谢愤怒的葡萄临贴支持{:4_190:}

南无月 发表于 2024-4-24 21:04

马黑黑 发表于 2024-4-24 20:41
处理图片的功夫又有长进，帖子设计也非常完好。点32个赞。

{:4_170:}
圆满。。
可以放心去看小说了

红影 发表于 2024-4-24 21:16

好漂亮的画面，背景的处理像油画。自己设计也漂亮，上面还带个小飞机的痕迹。
漂亮，欣赏月儿好帖{:4_199:}

红影 发表于 2024-4-24 21:17

这个自己加入歌词了呢，月儿厉害。色彩温暖柔和，真漂亮{:4_199:}

红影 发表于 2024-4-24 21:18

在你身边就是好时光，这首春日信笺的歌词真温暖{:4_204:}

马黑黑 发表于 2024-4-24 22:01

南无月 发表于 2024-4-24 21:04
圆满。。
可以放心去看小说了

三体还没看完么

南无月 发表于 2024-4-25 17:16

红影 发表于 2024-4-24 21:16
好漂亮的画面，背景的处理像油画。自己设计也漂亮，上面还带个小飞机的痕迹。
漂亮，欣赏月儿好帖{:4_199: ...

谢谢影子一直以来的支持鼓励，看到你的回复就十分开心{:4_187:}

南无月 发表于 2024-4-25 17:19

红影 发表于 2024-4-24 21:17
这个自己加入歌词了呢，月儿厉害。色彩温暖柔和，真漂亮

真不厉害 ，歌词是套用了黑黑的成吉思汗那贴。。。{:4_187:}

南无月 发表于 2024-4-25 17:21

红影 发表于 2024-4-24 21:18
在你身边就是好时光，这首春日信笺的歌词真温暖
歌名符合春天的情景，歌词也清爽温暖~~这回是真的看着歌名做的图。。{:4_170:}

南无月 发表于 2024-4-25 17:24

马黑黑 发表于 2024-4-24 22:01
三体还没看完么

三体是看完了。
现在又刚开一部新的。。穿越种田文。。。{:4_170:}
其实对种地有莫大的兴趣和向往~
看着文中各种小吃和风俗，家长里短，
加上文笔幽默，十分有趣。

南无月 发表于 2024-4-25 17:45

马黑黑 发表于 2024-4-24 22:01
三体还没看完么

给老师汇报一下：贴子粒子颜色已按老师提醒改为随机。。
其实这是我想要的最终效果。。
{:4_170:}

马黑黑 发表于 2024-4-25 18:04

南无月 发表于 2024-4-25 17:45
给老师汇报一下：贴子粒子颜色已按老师提醒改为随机。。
其实这是我想要的最终效果。。

的确，酱紫效果更理想了

马黑黑 发表于 2024-4-25 18:19

南无月 发表于 2024-4-25 17:24
三体是看完了。
现在又刚开一部新的。。穿越种田文。。。
其实对种地有莫大的兴趣和向往~


厉害

红影 发表于 2024-4-25 20:00

南无月 发表于 2024-4-25 17:16
谢谢影子一直以来的支持鼓励，看到你的回复就十分开心

我不会PS，每次看到你们做的图图都好羡慕好惊奇的呢{:4_173:}

红影 发表于 2024-4-25 20:00

南无月 发表于 2024-4-25 17:19
真不厉害 ，歌词是套用了黑黑的成吉思汗那贴。。。

不管怎么说这个帖子很成功很漂亮{:4_187:}

红影 发表于 2024-4-25 20:01

南无月 发表于 2024-4-25 17:21
歌名符合春天的情景，歌词也清爽温暖~~这回是真的看着歌名做的图。。

月儿做的帖子把歌曲的氛围都营造出来呢，清新而温暖{:4_187:}
页: [1] 2 3 4 5 6 7 8
查看完整版本: 春日信笺（学习黑师20240423《Blissful Mind》粒子随鼠标变化效果）