空月
<style>#papa { left: -302px; width: 1200px; height: 571px; background: #985b0a url('https://638183.freep.cn/638183/Pic/81/dc.jpg') no-repeat; box-shadow: 3px 3px 20px -3px #000; position: relative; }
#mama { position: absolute; width: 300px; height: 300px; left: calc(50% - 150px); top: calc(50% - 150px); display: grid; place-items: center; }
#box { position: absolute; width: 200px; height: 200px; border-radius: 50%; box-shadow: inset -8px -8px 160px -8px tan; animation: circle 4s linear infinite alternate; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: tan; text-shadow: 1px 1px 2px black; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes circle { from { transform: rotate(0) translate(50px); } to { transform: rotate(360deg) translate(50px); } }
</style>
<div id="papa">
<div id="mama"><span id="box"></span></div>
<div id="tit">高思超 - 空月</div>
<div id="disc"></div>
</div>
<script>
let stepX = 1, stepY = 1, moveX= 0, moveY = 0;
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1500880516.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
motion();
function motion() {
moveX += stepX;
moveY += stepY;
mama.style.left = moveX + 'px';
mama.style.top = moveY + 'px';
requestAnimationFrame(motion);
if(moveX < 0 || moveX >= papa.offsetWidth - mama.offsetWidth) stepX = -stepX;
if(moveY < 0 || moveY >= papa.offsetHeight - mama.offsetHeight) stepY = -stepY;
}
</script> 代码分享：
<style>
#papa { margin: auto; width: 1200px; height: 571px; background: #985b0a url('https://638183.freep.cn/638183/Pic/81/dc.jpg') no-repeat; box-shadow: 3px 3px 20px -3px #000; position: relative; }
#mama { position: absolute; width: 300px; height: 300px; left: calc(50% - 150px); top: calc(50% - 150px); display: grid; place-items: center; }
#box { position: absolute; width: 200px; height: 200px; border-radius: 50%; box-shadow: inset -8px -8px 160px -8px tan; animation: circle 4s linear infinite alternate; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: tan; text-shadow: 1px 1px 2px black; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes circle { from { transform: rotate(0) translate(50px); } to { transform: rotate(360deg) translate(50px); } }
</style>
<div id="papa">
<div id="mama"><span id="box"></span></div>
<div id="tit">高思超 - 空月</div>
<div id="disc"></div>
</div>
<script>
let stepX = 1, stepY = 1, moveX= 0, moveY = 0;
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1500880516.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
motion();
function motion() {
moveX += stepX;
moveY += stepY;
mama.style.left = moveX + 'px';
mama.style.top = moveY + 'px';
requestAnimationFrame(motion);
if(moveX < 0 || moveX >= papa.offsetWidth - mama.offsetWidth) stepX = -stepX;
if(moveY < 0 || moveY >= papa.offsetHeight - mama.offsetHeight) stepY = -stepY;
}
</script>
球球随机运动的处理机制：
实际上，球球做的是圆周运动，就是这个CSS关键帧动画代码驱使它做圆周运动——
@keyframes circle { from { transform: rotate(0) translate(50px); } to { transform: rotate(360deg) translate(50px); } }
球球的上层元素，id="mama" 的盒子，则做左右上下来回移动，这是JS自定义函数 motion() 驱使的。
mama元素带着球球，就产生随机漂浮的效果。
小球的活动限制在帖子之内，motion() 函数最后两句设定了mama的行进方向，mama和小球永远走不出帖子的边界。 PS：
球球调用关键帧动画的参数中，
animation: circle 4s linear infinite alternate;
alternate 是反向运行，意思是4秒中执行绕一圈之后，再用4秒时间反向运行一次。这个增加了球球运行的不规则性。 球球的CSS样式解释：
#box {
position: absolute; /* 绝对定位 */
width: 200px; /* 宽度 */
height: 200px; /* 高度 */
border-radius: 50%; /* 圆形 */
box-shadow: inset -8px -8px 160px -8px tan; /* 内阴影 */
animation: circle 4s linear infinite alternate; /* 调用动画 */
}
其中，内阴影的设置，
box-shadow: inset -8px -8px 160px -8px tan;
inset 表示是内阴影，不是常规阴影那样外泄，而是收拢在元素内部；
头两个 -8px 协助 inset 定位阴影位置（方向），xy方向分别往右、上收（阴影默认的xy方向是往右、下投射）。
160px 属模糊距离参数。
后面的 -8px 是 spread 参数，即阴影尺寸。
最后是阴影颜色参数，这里所用的颜色是 tan，棕褐色。
由于 #box 不设置背景色，其背景色就是全透明的，通过上面的内阴影设置，产生了帖子所呈现出来的外观。 月移漫星空，飘飞水泡中。何年停我院，携手话相逢。{:4_170:} 配色很漂亮。制作真美。大赞！ 加林森 发表于 2022-8-6 08:28
配色很漂亮。制作真美。大赞！
队长早 樵歌 发表于 2022-8-6 08:25
月移漫星空，飘飞水泡中。何年停我院，携手话相逢。
文豪早啊 这样的背景，陪着这样的圆球和这样的音乐，便有了如梦似幻的感觉。不规则运动竟然带来奇妙的感受，仿佛在若有所思的样子，再配合着音乐节奏，如此奇妙{:4_199:} 红影 发表于 2022-8-6 09:45
这样的背景，陪着这样的圆球和这样的音乐，便有了如梦似幻的感觉。不规则运动竟然带来奇妙的感受，仿佛在若 ...
感谢点评 马黑黑 发表于 2022-8-6 08:29
队长早
老黑上午好！ 多像一个大橘子啊 马黑黑 发表于 2022-8-6 08:30
文豪早啊
你是红影吧{:4_172:} 哇瑟~~~黑黑又一个新的{:4_178:} 无论图图，效果都是那么惊艳{:4_199:} 发现，黑黑的速度的~~~这些东东都半夜做的啊，一眨眼一个出来了，小辣椒根本就来不及做了{:4_170:} 小辣椒 发表于 2022-8-6 13:57
发现，黑黑的速度的~~~这些东东都半夜做的啊，一眨眼一个出来了，小辣椒根本就来不及做了
哪有那么神乎。我做帖速度很慢的 梦油 发表于 2022-8-6 11:02
多像一个大橘子啊
{:4_173:} 小辣椒 发表于 2022-8-6 13:56
无论图图，效果都是那么惊艳
果酱果酱