Dwarf Star

马黑黑 发表于 2024-9-23 12:01

马黑黑 发表于 2024-9-23 12:01

帖子代码
<style>
#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 700px; background: radial-gradient(transparent 75%, transparent, #eee), url('https://638183.freep.cn/638183/t24/webp2/dwarf.webp') no-repeat center/cover; box-shadow: 2px 2px 6px #333; display: grid; place-items: center; z-index: 1; position: relative; --opacity: .8; }
#player { position: absolute; width: 200px; height: 200px; cursor: pointer; transition: .6s; opacity: .8; animation: rot 8s linear infinite var(--state); }
#msvg { position: absolute; border: none; pointer-events: none; transition: 1.2s; }

@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29823218" autoplay loop></audio>
<img id="player" src="https://638183.freep.cn/638183/web/svg/p2.svg" alt="" title="播放/暂停" />
<iframe id="msvg" src="https://638183.freep.cn/638183/web/svg/ball8path1.svg" width="100%" height="100%"></iframe>
</div>

<script>
var players = document.querySelectorAll('.player');
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/fscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);

sc.onload = () => FS({
papa: '#tz',
scale: ,
css: 'left: 50%; bottom: 20px; transform: translate(-50%); --bg: transparent; --color: #eee;',
});

mState = () => {
tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
msvg.style.setProperty('opacity', aud.paused ? '0' : '.8');
player.title = aud.paused ? '播放' : '暂停';
};

aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-9-23 12:09

本帖：

（一）粒子来自 .svg 文档，使用CSS @keyframes的方式在 .svg 中驱动粒子运动；
（二）.svg 以 iframe 的方式嵌入HTML代码中，这么做主要是为了防抖：大尺寸运动的 .svg 动画使用 img 或 background 方式引入时粒子的运动多少会有些抖动，使用了 iframe 引用它会好得多。可选方案还有 object 和 embed 标签；
（三）.svg 未设置物理尺寸，仅设置视口尺寸，这意味着 .svg 可以根据父元素自适应宽高，无需为之设置 100% 的宽高尺寸。

【附】以嵌入svg代码的方式可以百分百防止动画抖动现象的发生，只是这么一来帖子代码量会增加，即使使用JS动态生成svg代码。

起个网名好难 发表于 2024-9-23 13:12

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

梦江南 发表于 2024-9-23 15:28

谢谢老师辛苦！{:4_190:}

小辣椒 发表于 2024-9-23 19:36

黑黑这个手环播放器出来了，漂亮！

小辣椒 发表于 2024-9-23 19:37

画面粒子效果炫酷，音乐震撼，制作大气

小辣椒 发表于 2024-9-23 19:38

不敢多写，刚才手一滑，没了{:4_198:}

醉美水芙蓉 发表于 2024-9-23 20:38

红影发表于 2024-9-23 20:48

这些粒子设计的运动轨迹，很好地呼应了穹顶和圆台的效果，充分利用了空间的视觉效果。黑黑的每个粒子效果都是静心设计的呢{:4_199:}

红影发表于 2024-9-23 20:50

手镯状小播也漂亮，还特地又加了四道套环，让转动效果更明显了{:4_199:}

红影发表于 2024-9-23 20:51

音乐也很大气震撼，这个制作太棒了{:4_199:}

马黑黑 发表于 2024-9-23 20:56

小辣椒发表于 2024-9-23 19:38
不敢多写，刚才手一滑，没了

换个9.9包邮的手机吧，便宜才有好货

马黑黑 发表于 2024-9-23 20:57

红影发表于 2024-9-23 20:48
这些粒子设计的运动轨迹，很好地呼应了穹顶和圆台的效果，充分利用了空间的视觉效果。黑黑的每个粒子效果都 ...

哪能静心呢，忙着捡瓶子呢

花飞飞 发表于 2024-9-23 22:27

马黑黑发表于 2024-9-23 12:09
本帖：

（一）粒子来自 .svg 文档，使用CSS @keyframes的方式在 .svg 中驱动粒子运动；

反正无论是全屏还是手机还是正常视窗，粒子运动都流畅自然。。
原来是白老师预判了问题并处理过了。。{:4_199:}
百分百防止抖动，十分强悍。。

马黑黑 发表于 2024-9-23 22:28

花飞飞发表于 2024-9-23 22:27
反正无论是全屏还是手机还是正常视窗，粒子运动都流畅自然。。
原来是白老师预判了问题并处理过了。。{: ...

单独运行都是流畅的

花飞飞 发表于 2024-9-23 22:30

背景，粒子，小播，音乐，完美结合，这个效果如科幻大片一般，十二分漂亮。。。

花飞飞 发表于 2024-9-23 22:31

马黑黑发表于 2024-9-23 22:28
单独运行都是流畅的

什么叫不单独运行啊..贴子里的叫组合运行吧。。

马黑黑 发表于 2024-9-23 22:34

花飞飞发表于 2024-9-23 22:31
什么叫不单独运行啊..贴子里的叫组合运行吧。。

就是说，单独打开 .svg 文档

花飞飞 发表于 2024-9-23 22:40

马黑黑发表于 2024-9-23 22:34
就是说，单独打开 .svg 文档

{:4_181:}我当是听懂了。

页: [1] 2 3

花潮论坛's Archiver

Dwarf Star