大河之舞

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #mydiv { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://img.shetu66.com/2023/08/09/1691549357221680.png') center/cover; box-shadow: 03px 3px 6px #333; display: grid; place-items: center; position: relative; }
   
3. #svg1 { position: absolute; top: 56%; cursor: pointer; filter: hue-rotate(0deg) drop-shadow(0 0 4px black); transition: 1s; }
   
4. #svg1:hover { filter: hue-rotate(200deg) drop-shadow(0 0 4px black); }
   
5. </style>
   
6. 
   
7. <div id="mydiv">
   
8.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=369439" autoplay loop></audio>
   
9.         <svg id="svg1" width="200" height="200" viewBox="0 0 200 200" fill="none" stroke="white" stroke-width="6" stroke-dasharray="6 12 6"></svg>
   
10. </div>
    
11. 
    
12. <script>
    
13. var ww = mydiv.offsetWidth;
    
14. var sc = document.createElement('script');
    
15. sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
    
16. sc.charset = 'utf-8';
    
17. document.body.appendChild(sc);
    
18. sc.onload = () => FS({papa: '#mydiv', css: 'bottom: 20px; --fsBg: #eeeeee90; --color: #336699;'});
    
19. var observer = new ResizeObserver((elms) => {
    
20.         var cr = elms[0].contentRect;
    
21.         svg1.style.transform = `scale(${cr.width / ww * 1.2})`;
    
22. });
    
23. mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), hsvg.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), hsvg.unpauseAnimations());
    
24. drawCircles = (num) => {
    
25.         let circlecode = '', anicode = '';
    
26.         Array(num).fill(0).forEach((c,k) => {
    
27.                 c = k + 1;
    
28.                 let bstr = k > 0 ? `ani${k}.begin+${k * 3 / num}s` : '0s';
    
29.                 let color = `#${Math.random().toString(16).substring(2,8)}a0`;
    
30.                 circlecode += `<circle id="cc${c}" cx="100" cy="100" r="0" stroke="${color}" transform="rotate(${360 / num * k} 100 100)"></circle>`;
    
31.                 anicode += `<animate xlink:href="#cc${c}" attributeName="r" values="0;90;0" dur="20s" repeatCount="indefinite" id="ani${c}" begin="${bstr}"></animate>`;
    
32.         });
    
33.         return circlecode + anicode;
    
34. };
    
35. svg1.innerHTML = drawCircles(10);
    
36. observer.observe(mydiv);
    
37. aud.onplaying = aud.onpause = () => aud.paused ? svg1.pauseAnimations() : svg1.unpauseAnimations();
    
38. svg1.onclick = () => aud.paused ? aud.play() : aud.pause();
    
39. </script>

复制代码

马黑黑

本帖：

一、小播用svg做成，画10个圆，圆用虚线描边，不填充。虚线设置在第 09 行，stroke-dasharray="6 12 6"；
二、使用ResizeObserver API实时监控帖子容器的尺寸变化，功能是处理小播的伸缩尺寸，具体是，父容器一旦有尺寸变化，小播立马以相应的尺寸响应。这个主要用于全屏和非全屏切换，但是，首次打开帖子 ResizeObserver 就开始工作，浏览器的其他任何伸缩都会被监控到并令小播做出适当的响应。这里，设计了小播按一定比例响应帖子容器尺寸的变化，在大小显示设备上都应有较好的表现。

梦江南

漂亮的线条变换播放器，看得眼花撩乱。

红影

马黑黑 发表于 2024-9-13 07:56
本帖：

一、小播用svg做成，画10个圆，圆用虚线描边，不填充。虚线设置在第 09 行，stroke-dasharray="6 ...

原来还有自适应的设计呢

红影

这个就是昨天的圆环吧，昨天是两个，今天变十个了，昨天是等距的虚线，今天是不等距的，昨天是单项运动，今天的是往复。。。不管怎样，看了昨天的，对今天的理解有好处

红影

这样层层叠叠的变化，让人沉醉，如此奇妙的代码设计

绿叶清舟

又是个新的啊，都来不及跟了

红影

鼠标触动也有颜色变化，这个小播真漂亮

马黑黑

红影 发表于 2024-9-13 15:24
鼠标触动也有颜色变化，这个小播真漂亮

过得去

马黑黑

梦江南 发表于 2024-9-13 09:25
漂亮的线条变换播放器，看得眼花撩乱。

马黑黑

红影 发表于 2024-9-13 09:59
原来还有自适应的设计呢

不设计的话，小显示设备下小播变大播

马黑黑

绿叶清舟 发表于 2024-9-13 11:02
又是个新的啊，都来不及跟了

碎步频率大一点就行

小辣椒

这个播放器是多层次圆的效果，我手机欣赏效果不错

马黑黑

醉美水芙蓉 发表于 2024-9-13 19:45
谢谢老师分享！

花飞飞

裂墙支持白老师新作，
一条线千变万化后成一个漂亮的小播。
高速运转的超强大脑总能带来无限惊喜和无限可能。。

红影

马黑黑 发表于 2024-9-13 17:52
不设计的话，小显示设备下小播变大播

黑黑考虑得很细致

红影

马黑黑 发表于 2024-9-13 17:51
过得去

发现SVG动画特别好看呢