空月

马黑黑 · 发表于 2022-8-6 07:38

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

高思超 - 空月

马黑黑 · 发表于 2022-8-6 07:42

代码分享：

<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>

马黑黑 · 发表于 2022-8-6 07:50

球球随机运动的处理机制：

实际上，球球做的是圆周运动，就是这个CSS关键帧动画代码驱使它做圆周运动——

@keyframes circle { from { transform: rotate(0) translate(50px); } to { transform: rotate(360deg) translate(50px); } }

球球的上层元素，id="mama" 的盒子，则做左右上下来回移动，这是JS自定义函数 motion() 驱使的。

mama元素带着球球，就产生随机漂浮的效果。

小球的活动限制在帖子之内，motion() 函数最后两句设定了mama的行进方向，mama和小球永远走不出帖子的边界。

马黑黑 · 发表于 2022-8-6 07:55

PS：

球球调用关键帧动画的参数中，

animation: circle 4s linear infinite alternate;

alternate 是反向运行，意思是4秒中执行绕一圈之后，再用4秒时间反向运行一次。这个增加了球球运行的不规则性。

马黑黑 · 发表于 2022-8-6 08:18

球球的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 不设置背景色，其背景色就是全透明的，通过上面的内阴影设置，产生了帖子所呈现出来的外观。