论坛 › 动画音画 › 蔡文晶 - 江湖

马黑黑 发表于 2024-6-24 07:26

蔡文晶 - 江湖

<style>
#tz { left: 50%; transform: translateX(calc(-50% - 81px)); width: 1200px; height: 750px; overflow: hidden; background: lightblue url('https://638183.freep.cn/638183/t24/3/jlhu.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; }
#tz:fullscreen li-zi { offset-path: path('M700 900 Q-400 450,960 -20'); }
li-zi { position: absolute; top: 0; width: 16px; height: 16px; border-radius: 50%; background: olive; offset-path: path('M600 800 Q-400 450,860 -20'); offset-distance: 0; filter: drop-shadow(-100px -160px 0 var(--shadow)); animation: fly 20s cubic-bezier(0.17,0.86,0.73,0.14) infinite var(--state); }
li-zi:hover { filter: hue-rotate(180deg) drop-shadow(-100px -160px 0 lightgreen); }
#player { position: absolute; right: 180px; bottom: 180px; width: 160px; height: 160px; cursor: pointer; transition: .5s; animation: rot 8s linear infinite var(--state); }
#player:hover { filter: brightness(1.2); }
@keyframes fly { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tz">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1440089299" autoplay loop></audio>
        <img id="player" alt="" title="播放" src="https://638183.freep.cn/638183/web/svg/flower_3.svg" />
</div>

<script>
//粒子
new Array(total = 60).fill(0).map((i,k) => {
        i = document.createElement('li-zi');
        i.style.cssText += `
                left: ${600 / total * k + 20}px;
                background-image: linear-gradient(lightgreen, #${Math.random().toString(16).substring(2,8)});
                animation-delay: -${Math.random() * 20}s;
                --shadow: #${Math.random().toString(16).substring(2,8)};
        `;
        tz.prepend(i);
});
//联动函数
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: 20px; left: 50%; transform: translateX(-50%); --color: white; --fsBg: green;',
});
</script>

马黑黑 发表于 2024-6-24 07:27

帖子代码
<style>
#tz { left: 50%; transform: translateX(calc(-50% - 1px)); width: 1200px; height: 750px; overflow: hidden; background: lightblue url('https://638183.freep.cn/638183/t24/3/jlhu.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; }
#tz:fullscreen li-zi { offset-path: path('M700 900 Q-400 450,960 -20'); }
li-zi { position: absolute; top: 0; width: 16px; height: 16px; border-radius: 50%; background: olive; offset-path: path('M600 800 Q-400 450,860 -20'); offset-distance: 0; filter: drop-shadow(-100px -160px 0 var(--shadow)); animation: fly 20s cubic-bezier(0.17,0.86,0.73,0.14) infinite var(--state); }
li-zi:hover { filter: hue-rotate(180deg) drop-shadow(-100px -160px 0 lightgreen); }
#player { position: absolute; right: 180px; bottom: 180px; width: 160px; height: 160px; cursor: pointer; transition: .5s; animation: rot 8s linear infinite var(--state); }
#player:hover { filter: brightness(1.2); }
@keyframes fly { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tz">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1440089299" autoplay loop></audio>
        <img id="player" alt="" title="播放" src="https://638183.freep.cn/638183/web/svg/flower_3.svg" />
</div>

<script>
//粒子
new Array(total = 60).fill(0).map((i,k) => {
        i = document.createElement('li-zi');
        i.style.cssText += `
                left: ${600 / total * k + 20}px;
                background-image: linear-gradient(lightgreen, #${Math.random().toString(16).substring(2,8)});
                animation-delay: -${Math.random() * 20}s;
                --shadow: #${Math.random().toString(16).substring(2,8)};
        `;
        tz.prepend(i);
});
//联动函数
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: 20px; left: 50%; transform: translateX(-50%); --color: white; --fsBg: green;',
});
</script>

马黑黑 发表于 2024-6-24 07:37

本帖：

（一）通过CSS伪类 :fullscreen 简单处理 li-zi 的运行路径 offset-path，非精细处理；
（二）animation-timing-function 即动画在每一个周期内的时间分布（时间曲率），使用了 赛贝尔曲线，cubic-bezier(0.17,0.86,0.73,0.14)，功能类似于之前一直使用的 linear（匀速）。

马黑黑 发表于 2024-6-24 07:46

（三）粒子有真伪：粒子、影子，其实容易辨认——粒子背景渐变、影子纯色。设备指针触碰真粒子时粒子会变色，影子粒子变为浅绿色。

梦油 发表于 2024-6-24 09:29

这些飘舞的彩球为大草原增添了无穷的魅力，赞精彩的制作！

梦江南 发表于 2024-6-24 09:44

谢谢老师分享，漂亮！

红影 发表于 2024-6-24 10:31

这样的背景下，这样的粒子运行带着梦幻般的感觉。很赞。
全屏的效果更震撼呢，这个制作太美了{:4_199:}

红影 发表于 2024-6-24 10:35

马黑黑 发表于 2024-6-24 07:46
（三）粒子有真伪：粒子、影子，其实容易辨认——粒子背景渐变、影子纯色。设备指针触碰真粒子时粒子会变色 ...

filter: drop-shadow(-100px -160px 0 var(--shadow));是这句弄的影子吧，然后js里还赋予了阴影的各种颜色。
粒子和粒子阴影，这影子两字用得咋那么别扭呢{:4_196:}

红影 发表于 2024-6-24 10:36

马黑黑 发表于 2024-6-24 07:37
本帖：

（一）通过CSS伪类 :fullscreen 简单处理 li-zi 的运行路径 offset-path，非精细处理；


animation: fly 20s cubic-bezier(0.17,0.86,0.73,0.14) infinite var(--state); }

这个倒是第一次见呢，原来动画还能这样设计{:4_204:}

红影 发表于 2024-6-24 10:39

这些粒子小精灵被小播转动出来的一样。它们活泼泼地跑出来，到了中间行为慢下来，贪看草原的美丽，然后又被后面涌出的粒子推搡着，笑嘻嘻地从右上角跑出去了。

这个制作带来视觉盛宴，真的像在眼前展开了一个童话故事般{:4_173:}

南无月 发表于 2024-6-24 12:36

这个贴子电脑看全屏效果极其壮观，透亮透亮的。。正宗的漂亮。{:4_199:}

南无月 发表于 2024-6-24 12:41

马黑黑 发表于 2024-6-24 07:37
本帖：

（一）通过CSS伪类 :fullscreen 简单处理 li-zi 的运行路径 offset-path，非精细处理；


原来看代码，还纳闷为啥整一个路径还有一个曲线。。。
原来后一个是时间分布。。
先快再慢再快。。。。
这样更精细啊，可以控制某个范围的速度。。
改为相同数据是不是应该{:4_199:}就匀速了，跟之前一样

南无月 发表于 2024-6-24 12:46

马黑黑 发表于 2024-6-24 07:46
（三）粒子有真伪：粒子、影子，其实容易辨认——粒子背景渐变、影子纯色。设备指针触碰真粒子时粒子会变色 ...

这里又解惑了。。。现在明白。
立体的是粒子。。没有立体感的是它的影子。。
所以，点某个粒子变色的时候，远处的影子也会变色。。
只不过粒子和影子离得有点远，不像平时的阴影一直就在边上。。

还有就是，运动的粒子不好逮，飞得太6了。。{:4_173:}

马黑黑 发表于 2024-6-24 12:48

南无月 发表于 2024-6-24 12:46
这里又解惑了。。。现在明白。
立体的是粒子。。没有立体感的是它的影子。。
所以，点某个粒子变色的时 ...

暂停音乐再慢慢逮

南无月 发表于 2024-6-24 12:53

马黑黑 发表于 2024-6-24 12:48
暂停音乐再慢慢逮

{:4_170:}飞着逮比较有刺激，站着没兴趣逮了

马黑黑 发表于 2024-6-24 12:53

南无月 发表于 2024-6-24 12:41
原来看代码，还纳闷为啥整一个路径还有一个曲线。。。
原来后一个是时间分布。。
先快再慢再快。。。。 ...

匀速的应该是 0,0,1,1

使用 cubic-bezier() 函数表达运动时间曲率，需要四个参数：x1, y1, x2, y2，它们都是三次贝塞尔曲线的两个控制点的坐标，其中，x1、x2 取值范围是浮点数，0~1之间（含头尾值）；y1、y2也建议在 0~1 之间取值，但本质上 y1、y2 不受限制。

马黑黑 发表于 2024-6-24 12:54

南无月 发表于 2024-6-24 12:36
这个贴子电脑看全屏效果极其壮观，透亮透亮的。。正宗的漂亮。

图好，效果就好

马黑黑 发表于 2024-6-24 12:54

梦油 发表于 2024-6-24 09:29
这些飘舞的彩球为大草原增添了无穷的魅力，赞精彩的制作！

{:4_190:}

马黑黑 发表于 2024-6-24 12:54

梦江南 发表于 2024-6-24 09:44
谢谢老师分享，漂亮！

{:4_190:}

马黑黑 发表于 2024-6-24 12:54

红影 发表于 2024-6-24 10:31
这样的背景下，这样的粒子运行带着梦幻般的感觉。很赞。
全屏的效果更震撼呢，这个制作太美了

{:4_190:}

查看完整版本: 蔡文晶 - 江湖