大河之舞

马黑黑 发表于 2024-9-13 07:44

马黑黑 发表于 2024-9-13 07:45

帖子代码
<style>
#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; }
#svg1 { position: absolute; top: 56%; cursor: pointer; filter: hue-rotate(0deg) drop-shadow(0 0 4px black); transition: 1s; }
#svg1:hover { filter: hue-rotate(200deg) drop-shadow(0 0 4px black); }
</style>

<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=369439" autoplay loop></audio>
<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>
</div>

<script>
var ww = mydiv.offsetWidth;
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({papa: '#mydiv', css: 'bottom: 20px; --fsBg: #eeeeee90; --color: #336699;'});
var observer = new ResizeObserver((elms) => {
var cr = elms.contentRect;
svg1.style.transform = `scale(${cr.width / ww * 1.2})`;
});
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), hsvg.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), hsvg.unpauseAnimations());
drawCircles = (num) => {
let circlecode = '', anicode = '';
Array(num).fill(0).forEach((c,k) => {
c = k + 1;
let bstr = k > 0 ? `ani${k}.begin+${k * 3 / num}s` : '0s';
let color = `#${Math.random().toString(16).substring(2,8)}a0`;
circlecode += `<circle id="cc${c}" cx="100" cy="100" r="0" stroke="${color}" transform="rotate(${360 / num * k} 100 100)"></circle>`;
anicode += `<animate xlink:href="#cc${c}" attributeName="r" values="0;90;0" dur="20s" repeatCount="indefinite" id="ani${c}" begin="${bstr}"></animate>`;
});
return circlecode + anicode;
};
svg1.innerHTML = drawCircles(10);
observer.observe(mydiv);
aud.onplaying = aud.onpause = () => aud.paused ? svg1.pauseAnimations() : svg1.unpauseAnimations();
svg1.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

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

本帖：

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

梦江南 发表于 2024-9-13 09:25

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

红影发表于 2024-9-13 09:59

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

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

原来还有自适应的设计呢{:4_187:}

红影发表于 2024-9-13 10:03

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

红影发表于 2024-9-13 10:05

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

绿叶清舟 发表于 2024-9-13 11:02

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

红影发表于 2024-9-13 15:24

鼠标触动也有颜色变化，这个小播真漂亮{:4_204:}

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

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

过得去

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

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

{:4_190:}

马黑黑 发表于 2024-9-13 17:52

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

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

马黑黑 发表于 2024-9-13 17:52

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

碎步频率大一点就行

小辣椒 发表于 2024-9-13 18:56

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

醉美水芙蓉 发表于 2024-9-13 19:45

马黑黑 发表于 2024-9-13 19:59

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

{:4_190:}

花飞飞 发表于 2024-9-13 20:28

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

红影发表于 2024-9-13 20:35

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

黑黑考虑得很细致{:4_187:}

红影发表于 2024-9-13 20:36

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

发现SVG动画特别好看呢{:4_187:}

页: [1] 2 3

花潮论坛's Archiver

大河之舞