Dwarf Star

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #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; }
   
3. #player { position: absolute; width: 200px; height: 200px; cursor: pointer; transition: .6s; opacity: .8; animation: rot 8s linear infinite var(--state); }
   
4. #msvg { position: absolute; border: none; pointer-events: none; transition: 1.2s; }
   
5. 
   
6. @keyframes rot { to { transform: rotate(1turn); } }
   
7. </style>
   
8. 
   
9. <div id="tz">
   
10.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=29823218" autoplay loop></audio>
    
11.         <img id="player" src="https://638183.freep.cn/638183/web/svg/p2.svg" alt="" title="播放/暂停" />
    
12.         <iframe id="msvg" src="https://638183.freep.cn/638183/web/svg/ball8path1.svg" width="100%" height="100%"></iframe>
    
13. </div>
    
14. 
    
15. <script>
    
16. var players = document.querySelectorAll('.player');
    
17. var sc = document.createElement('script');
    
18. sc.src = 'https://638183.freep.cn/638183/web/js2024/fscreen.js';
    
19. sc.charset = 'utf-8';
    
20. document.body.appendChild(sc);
    
21. 
    
22. sc.onload = () => FS({
    
23.         papa: '#tz',
    
24.         scale: [player],
    
25.         css: 'left: 50%; bottom: 20px; transform: translate(-50%); --bg: transparent; --color: #eee;',
    
26. });
    
27. 
    
28. mState = () => {
    
29.         tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
30.         msvg.style.setProperty('opacity', aud.paused ? '0' : '.8');
    
31.         player.title = aud.paused ? '播放' : '暂停';
    
32. };
    
33. 
    
34. aud.onplaying = aud.onpause = () => mState();
    
35. player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
36. </script>

复制代码

马黑黑

本帖：

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

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

起个网名好难

                               
登录/注册后可看大图

梦江南

谢谢老师辛苦！

小辣椒

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

小辣椒

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

小辣椒

不敢多写，刚才手一滑，没了

红影

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

红影

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

红影

音乐也很大气震撼，这个制作太棒了

马黑黑

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

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

马黑黑

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

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

花飞飞

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

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

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

马黑黑

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

单独运行都是流畅的

花飞飞

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

花飞飞

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

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

马黑黑

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

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

花飞飞

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

我当是听懂了。