|
|
楼主 |
发表于 2022-8-7 20:18
|
显示全部楼层
本帖最后由 马黑黑 于 2022-8-7 20:19 编辑
那是代码不完整。参考这个二合一的（吉尔拉+天际）：
<style>
#papa { margin: auto; width: 1024px; height: 576px; background: lightgreen url('https://638183.freep.cn/638183/Pic/81/lake1.jpg') no-repeat center/cover; box-shadow: 3px 3px 24px #000; overflow: hidden; position: relative; }
#ball { position: absolute; width: 100px; height: 100px; background: rgba(0,255,255,.75) radial-gradient(at 35% 35%, lightgray, transparent); border-radius: 50%; cursor: pointer; }
#tit { position: absolute; padding: 0; margin: 0; left: 20px; top: 20px; font: bold 2em sans-serif; color: #6795ac; text-shadow: 1px 1px 2px rgba(0,0,0,.75); }
.mpic { position: absolute; width: 124px; height: 221px; right: -124px; bottom: -130px; }
@keyframes shot { from {transform: translate(0px, 0px) rotate(-45deg); } to { transform: translate(-1084px, -600px) rotate(-45deg); }}
</style>
<div id="papa">
<span id="tit">陈悦 - 吉尔拉</span>
<span id="ball"></span>
</div>
<script>
let moveX = 0, moveY = 0, stepX = 1, stepY = 1, canMove = true, aud = new Audio(), timer, arr = [0,1,2,3,4,5];
aud.src = 'https://music.163.com/song/media/outer/url?id=211011.mp3';
aud.loop = true;
aud.autoplay = true;
for(x of arr) {
let ele = document.createElement('img');
ele.className = 'mpic';
ele.src = 'https://638183.freep.cn/638183/Pic/81/tj.gif';
ele.alt = '';
ele.style.animation = 'shot 4s linear ' + x * .6 + 's infinite';
papa.appendChild(ele);
}
timer = requestAnimationFrame(motion);
function motion() {
moveX += stepX;
moveY += stepY;
ball.style.left = moveX + 'px';
ball.style.top = moveY + 'px';
timer = requestAnimationFrame(motion);
if(moveX < 0 || moveX > papa.offsetWidth - ball.offsetWidth) stepX = -stepX;
if(moveY < 0 || moveY > papa.offsetHeight - ball.offsetHeight) stepY = -stepY;
}
ball.onclick = () => aud.paused ? (aud.play(), requestAnimationFrame(motion)) : (aud.pause(), cancelAnimationFrame(timer));
</script>
|
|
楼主: 马黑黑
显身卡
发表于 2022-8-6 20:21
