游心
本帖最后由 马黑黑 于 2023-12-23 17:10 编辑 <br /><br /><style>#papa {
margin: -60px 00 calc(50% - 561px);
width: 960px;
height: 600px;
box-shadow: 4px 8px 28px gray;
background: url('https://638183.freep.cn/638183/t23/webp2/yzxb.jpg');
display: grid;
place-items: center;
position: relative;
}
li-zi {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: navy;
opacity: .75;
animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
@keyframes moving {
from { transform: translate(0,0); }
to { transform: translate(var(--xx),var(--yy)); }
}
</style>
<div id="papa"></div>
<script>
let total = 90;
let rx = papa.offsetWidth / 2 - 10, ry = papa.offsetHeight / 2 - 10;
Array.from({length: total}).forEach((item,key) => {
let rad = (Math.PI / 180) * 360 / total;
item = document.createElement('li-zi');
item.style.cssText += `
--xx: ${rx * Math.cos(rad * key)}px;
--yy: ${ry * Math.sin(rad * key)}px;
--duration: ${2 + Math.random() * 3}s;
--delay: -${Math.random() * 5}s;
background: #${Math.random().toString(16).substr(-6)};
`;
papa.appendChild(item);
});
let sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);
sf.onload = () => {
let myplayer = new mPlayer();
myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=1933923242');
myplayer.setBtnCss(`
background: url('https://638183.freep.cn/638183/t23/btn/hshx.png') no-repeat center/cover;
width: 200px;
height: 200px;
filter: hue-rotate(200deg) opacity(.8);
`);
myplayer.setLrcCss('top:10px; left:10px; color: lightblue; --bg: snow;');
myplayer.lrcAr = [,];
};
</script>
帖子代码
<style>
#papa {
margin: 0 0 0 calc(50% - 561px);
width: 960px;
height: 600px;
box-shadow: 4px 8px 28px gray;
background: url('https://638183.freep.cn/638183/t23/webp2/yzxb.jpg');
display: grid;
place-items: center;
position: relative;
}
li-zi {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: navy;
opacity: .75;
animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
@keyframes moving {
from { transform: translate(0,0); }
to { transform: translate(var(--xx),var(--yy)); }
}
</style>
<div id="papa"></div>
<script>
let total = 90;
let rx = papa.offsetWidth / 2 - 10, ry = papa.offsetHeight / 2 - 10;
Array.from({length: total}).forEach((item,key) => {
let rad = (Math.PI / 180) * 360 / total;
item = document.createElement('li-zi');
item.style.cssText += `
--xx: ${rx * Math.cos(rad * key)}px;
--yy: ${ry * Math.sin(rad * key)}px;
--duration: ${2 + Math.random() * 3}s;
--delay: -${Math.random() * 5}s;
background: #${Math.random().toString(16).substr(-6)};
`;
papa.appendChild(item);
});
let sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);
sf.onload = () => {
let myplayer = new mPlayer();
myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=1933923242');
myplayer.setBtnCss(`
background: url('https://638183.freep.cn/638183/t23/btn/hshx.png') no-repeat center/cover;
width: 200px;
height: 200px;
filter: hue-rotate(200deg) opacity(.8);
`);
myplayer.setLrcCss('top:10px; left:10px; color: lightblue; --bg: snow;');
myplayer.lrcAr = [,];
};
</script>
关于 li-zi 元素的运动：
父元素约束了 li-zi 的位置，在大矩形即帖子父元素自身的中心。故而，关键帧动画的 from 里的 translate(0,0) 指的就是这个位置；to 里的位置，需要计算椭圆圆周上的点，依据粒子应该运动的角度，360 / total * 序号，在 JS 中要变换成弧度，Math.PI / 180 * 角度。
最后算出变量 --xx、--yy，它们就是 to 的点坐标。 https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 起个网名好难 发表于 2023-12-23 17:54
谢谢 醉美水芙蓉 发表于 2023-12-23 18:07
黑黑老师晚上好！欣赏学习老师精彩音画！
感谢支持 这个粒子的往复运动也好看。那个做播放器的花儿也是黑黑常用的呢{:4_187:} 很奇妙的背景，漂亮{:4_199:} 看这个用了mplayer组件，应该也可以使用ypPlayer组件的吧{:4_173:} 黑黑总能找到这样奇妙的背景的呢，记得之前也有个背景特别奇妙{:4_187:} 红影 发表于 2023-12-23 19:36
这个粒子的往复运动也好看。那个做播放器的花儿也是黑黑常用的呢
这是好花花{:4_170:} 红影 发表于 2023-12-23 19:40
黑黑总能找到这样奇妙的背景的呢，记得之前也有个背景特别奇妙
随便找随便有
红影 发表于 2023-12-23 19:38
看这个用了mplayer组件，应该也可以使用ypPlayer组件的吧
都可以 欣赏黑黑老师新粒子效果代码，学习了！{:4_190:} 马黑黑 发表于 2023-12-23 19:52
这是好花花
是啊，而且每次使用效果都完全不同{:4_187:} 马黑黑 发表于 2023-12-23 19:53
随便找随便有
这科不一定，和人的审美观有关呢。 马黑黑 发表于 2023-12-23 19:53
都可以
而且粒子也可以换图图的呢{:4_204:} 红影 发表于 2023-12-23 20:38
而且粒子也可以换图图的呢
对，background属性 亦是金 发表于 2023-12-23 20:35
欣赏黑黑老师新粒子效果代码，学习了！
都那样儿