茉
本帖最后由 马黑黑 于 2024-9-30 08:17 编辑 <br /><br /><style>#dbox {
margin: 30px 0 30px calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/4/mo.jpg') no-repeat center/cover;
box-shadow: 4px 4px 16px #00000080;
z-index: 1;
position: relative;
}
#player {
position: absolute;
width: 200px;
height: 200px;
left: calc(50% - 100px);
top: calc(50% - 150px);
cursor: pointer;
display: grid;
place-items: center;
filter: drop-shadow(1px 1px 0 #000);
animation: rot linear 10s infinite var(--state);
}
#player::before {
position: absolute;
content: '';
width: 15px;
height: 15px;
border-radius: 50%;
background: plum;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="dbox">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1387600520" autoplay loop></audio>
<svg id="bsvg" width="1024" height="640">
<rect x="0" y="0" width="100%" height="100%" rx="8" ry="5" fill="none" stroke="snow" stroke-width="8" stroke-dasharray="8 4">
<animate attributeName="stroke-dashoffset" from="0" to="-48" dur="2s" begin="0s" repeatCount="indefinite"/>
</rect>
</svg>
<div id="player"></div>
</div>
<script>
mState = () => {
dbox.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? bsvg.pauseAnimations() : bsvg.unpauseAnimations();
player.title = aud.paused ? '点击播放' : '点击暂停';
}
mkParticles = (circles, columns, target) => {
var size = Math.floor(target.clientWidth / 2 / circles - 10);
for(var i = 0; i < circles; i ++) {
var distance = i * (size + 5) + size + 10;
for(var k = 0; k < columns; k ++) {
var angle =360 / columns * k;
var span = document.createElement('span');
span.style.cssText += `
position: absolute;
width: ${size}px;
height: ${size}px;
background: #${Math.random().toString(16).substring(2,8)};
border-radius: 100% 80%;
transform: rotate(${angle}deg) translate(${distance}px);
`;
target.appendChild(span);
}
}
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
mkParticles(4,9,player);
</script>
本帖最后由 马黑黑 于 2024-9-30 08:16 编辑 <br /><br /><h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#dbox {
margin: 30px 0 30px calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/4/mo.jpg') no-repeat center/cover;
box-shadow: 4px 4px 16px #00000080;
z-index: 1;
position: relative;
}
#player {
position: absolute;
width: 200px;
height: 200px;
left: calc(50% - 100px);
top: calc(50% - 150px);
cursor: pointer;
display: grid;
place-items: center;
filter: drop-shadow(1px 1px 0 #000);
animation: rot linear 10s infinite var(--state);
}
#player::before {
position: absolute;
content: '';
width: 15px;
height: 15px;
border-radius: 50%;
background: plum;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="dbox">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1387600520" autoplay loop></audio>
<svg id="bsvg" width="1024" height="640">
<rect x="0" y="0" width="100%" height="100%" rx="8" ry="5" fill="none" stroke="snow" stroke-width="8" stroke-dasharray="8 4">
<animate attributeName="stroke-dashoffset" from="0" to="-48" dur="2s" begin="0s" repeatCount="indefinite"/>
</rect>
</svg>
<div id="player"></div>
</div>
<script>
mState = () => {
dbox.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? bsvg.pauseAnimations() : bsvg.unpauseAnimations();
player.title = aud.paused ? '点击播放' : '点击暂停';
}
mkParticles = (circles, columns, target) => {
varsize = Math.floor(target.clientWidth / 2 / circles - 10);
for(var i = 0; i < circles; i ++) {
vardistance = i * (size + 5) + size + 10;
for(var k = 0; k < columns; k ++) {
var angle =360 / columns * k;
var span = document.createElement('span');
span.style.cssText += `
position: absolute;
width: ${size}px;
height: ${size}px;
background: #${Math.random().toString(16).substring(2,8)};
border-radius: 100% 80%;
transform: rotate(${angle}deg) translate(${distance}px);
`;
target.appendChild(span);
}
}
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
mkParticles(4,9,player);
</script>
</pre></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/helight/helight.js';
document.body.appendChild(sc);
</script> 黑黑老师早！老师的这个播放器不但漂亮还能控制边框的粒子。真神奇！{:4_187:} 本帖：
（一）小播有CSS+HTML做成，小播粒子由JS函数 mkParticle(圈数, 列数, 父元素) 生成，71行调用函数，在 id="player" 的父元素内生成4圈9列的例子。粒子样式修改：粒子形状62行，粒子颜色61行。粒子父元素应设计为约束子元素绝对居中（18、19行），其宽高尺寸一致，父元素的宽高和粒子的圈数决定粒子的大小；
（二）帖子流动边框使用 svg 实现，借助 stroke-dasharray + stroke-dashoffset 做成的效果。其中，为使得流动过渡平滑，from 和 to 的值中，不为 0 的属性值应设置得当（一般为 dasharray 头一个数的倍数，可以观察效果后修正）。 漂亮，欣赏学习下~~{:4_190:} 粒子小播的转速和外围svg的转速一样呢，眼睛的余光补充着小播的转动效果，很奇妙的感受{:4_199:} border-radius: 100% 80%; 怪不得，感觉小播的粒子不是正圆呢。
不是大于50%的都会表现为半圆么，原来还是有差异的啊{:4_187:} 流动边框里的<rect x="0" y="0" width="100%" height="100%" rx="8" ry="5"
宽度是8，所以rx的值能理解，ry为什么是5呢？ js中和圈数列数有关，列数那里大致能明白，是360度上的均布和延伸一段距离。圈数没看懂，那个计算产生了粒子的大小和延伸的距离，那个公式没明白是什么含义{:4_173:} 红影 发表于 2024-9-30 10:06
js中和圈数列数有关，列数那里大致能明白，是360度上的均布和延伸一段距离。圈数没看懂，那个计算产生了粒 ...
圈数指从中心往外延伸的圆环（不算中心点），设计多少圈就有多少层粒子圈圈；列指中心点到圆周上任意一点的直线，就是一列粒子。每一列上有圈数个粒子。 朵拉 发表于 2024-9-30 09:20
漂亮，欣赏学习下~~
{:4_180:} 红影 发表于 2024-9-30 09:35
粒子小播的转速和外围svg的转速一样呢，眼睛的余光补充着小播的转动效果，很奇妙的感受
不过边框流动是错觉效果。它不真正流动，但它确实有移动变化。 红影 发表于 2024-9-30 09:50
流动边框里的
针对矩形标签 rect，它有 rx 和 ry 属性，这是圆角属性，一个基于水平方向，另一个基于垂直方向。 红影 发表于 2024-9-30 09:43
border-radius: 100% 80%; 怪不得，感觉小播的粒子不是正圆呢。
不是大于50%的都会表现为半圆么，原来还是 ...
CSS的 border-radius，当元素宽高一致，单值时，大于 50% 的都是圆；双值时，只有 50% 才是正圆，三值以上是也是如此。 梦江南 发表于 2024-9-30 08:01
黑黑老师早！老师的这个播放器不但漂亮还能控制边框的粒子。真神奇！
边框是另外设置的，不是播放器弄出来的 马黑黑 发表于 2024-9-30 08:04
本帖：
（一）小播有CSS+HTML做成，小播粒子由JS函数 mkParticle(圈数, 列数, 父元素) 生成，71行调用函 ...
刚才跟贴的时候，差点没找出来边框的颜色在哪里，后来才发现SVG，还没细看生成原理，但用的效果是绝美 了，加了90的透明度。。 {:4_170:}这个太阳小播颜值高 花飞飞 发表于 2024-9-30 15:58
这个太阳小播颜值高
貌似是素颜 花飞飞 发表于 2024-9-30 15:57
刚才跟贴的时候，差点没找出来边框的颜色在哪里，后来才发现SVG，还没细看生成原理，但用的效果是绝美 了 ...
有点透明度更美 马黑黑 发表于 2024-9-30 10:41
圈数指从中心往外延伸的圆环（不算中心点），设计多少圈就有多少层粒子圈圈；列指中心点到圆周上任意一点 ...
嗯嗯，这样的纵横就形成了漂亮的阳光图案{:4_187:}