这个也是老歌了吧。
应该是哪，俺还是头一回听到的了 本帖最后由 加林森 于 2022-8-6 13:45 编辑 <br /><br />绿叶清舟 发表于 2022-6-28 21:06
应该是哪，俺还是头一回听到的了
刚才我用的是手机在回答你，现在我上电脑了。
<style>
#papa { left: -302px;; width: 1200px; height: 800px; background: #985b0a url('https://s1.ax1x.com/2022/08/06/vuFM2n.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=1500880508.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-6-28 20:54
谢谢关心哦
别客气 加林森 发表于 2022-6-28 17:15
与歌曲很配合得来的。
嗯嗯，都挺相衬的{:4_187:} 加林森 发表于 2022-6-28 21:11
刚才我用的是手机在回答你，现在我上电脑了。
队长手机上也玩啊，手机上俺用的写字输入的太慢，基本都只是看看的了 绿叶清舟 发表于 2022-6-28 21:18
队长手机上也玩啊，手机上俺用的写字输入的太慢，基本都只是看看的了
我习惯了，所以很快的。 红影 发表于 2022-6-28 21:15
嗯嗯，都挺相衬的
我听完歌曲就想怎么去找动态背景的。 梦油 发表于 2022-6-28 21:15
别客气
好的。 队长进步真的大，这个视频背景配的很自然，美女图图也是不错{:4_199:} 小辣椒 发表于 2022-6-28 21:44
队长进步真的大，这个视频背景配的很自然，美女图图也是不错
谢谢小辣椒。快去收我送你的川菜哦。 加林森 发表于 2022-6-28 21:25
我听完歌曲就想怎么去找动态背景的。
找的挺好的呢{:4_187:} 红影 发表于 2022-6-29 09:28
找的挺好的呢
是啊。好看就行了。 加林森 发表于 2022-6-29 11:56
是啊。好看就行了。
很赞{:4_204:} 红影 发表于 2022-6-29 12:57
很赞
谢谢！{:4_204:}
页:
1
[2]