绿叶清舟 发表于 2022-9-1 20:12

满江红

本帖最后由 绿叶清舟 于 2022-9-1 20:13 编辑 <br /><br /><style>
#papa { margin: auto; left: -250px; top: 80px;width: 1100px; height: 700px; background: #122232 url('https://pic.imgdb.cn/item/6310a1b816f2c2beb1739169.jpg') no-repeat; box-shadow: 3px 3px 20px -3px #000; position: relative; }

#disc { position: absolute; width: 40px; height: 40px; left: 10px; bottom: 10px; background: conic-gradient(#000000,#969696,#000000,#969696,#000000); 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; bottom: 10px;font: bold 22px / 40px sans-serif; color: #ffff00; 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="tit">满江红 - 关栋天 瑞鸣音乐</div>
      <div id="disc"></div>
</div>
<BR><BR><BR><BR><BR><BR>
<script>
let stepX = 1, stepY = 1, moveX= 0, moveY = 0;
let aud = new Audio();

aud.src = 'http://music.163.com/song/media/outer/url?id=5250924.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-9-1 20:17

很有气势的满江红，标题字漂亮{:4_187:}

加林森 发表于 2022-9-1 20:20

好帖，制作漂亮。有气势！{:4_199:}

红影 发表于 2022-9-1 20:31

立马横枪，精忠报国，清舟的制作很大气，千军万马中一骑跃起，誓把匈奴全消灭{:4_199:}

绿叶清舟 发表于 2022-9-1 20:36

千羽 发表于 2022-9-1 20:17
很有气势的满江红，标题字漂亮

千羽晚上好，在啊

绿叶清舟 发表于 2022-9-1 20:37

加林森 发表于 2022-9-1 20:20
好帖，制作漂亮。有气势！

谢谢队长，不整些气势来被以为没有嘎嘎吃了{:4_189:}

千羽 发表于 2022-9-1 20:40

绿叶清舟 发表于 2022-9-1 20:36
千羽晚上好，在啊

好几天没上来了，现在又{:4_173:}出现了

绿叶清舟 发表于 2022-9-1 20:51

红影 发表于 2022-9-1 20:31
立马横枪，精忠报国，清舟的制作很大气，千军万马中一骑跃起，誓把匈奴全消灭

只能纸上解解气了{:4_189:}

绿叶清舟 发表于 2022-9-1 20:52

千羽 发表于 2022-9-1 20:40
好几天没上来了，现在又出现了

很忙啊

元时务 发表于 2022-9-1 20:52

清舟出品，必属精品{:4_199:}

千羽 发表于 2022-9-1 20:53

绿叶清舟 发表于 2022-9-1 20:52
很忙啊

嗯，现在好了{:4_181:}

绿叶清舟 发表于 2022-9-1 20:56

元时务 发表于 2022-9-1 20:52
清舟出品，必属精品

马甲还没脱啊{:4_189:}

绿叶清舟 发表于 2022-9-1 20:57

千羽 发表于 2022-9-1 20:53
嗯，现在好了

忙正事重要的

千羽 发表于 2022-9-1 20:58

绿叶清舟 发表于 2022-9-1 20:57
忙正事重要的

嗯，现在轻松了{:4_181:}

加林森 发表于 2022-9-1 20:59

绿叶清舟 发表于 2022-9-1 20:37
谢谢队长，不整些气势来被以为没有嘎嘎吃了

{:4_172:}知道啦？

元时务 发表于 2022-9-1 21:00

红影 发表于 2022-9-1 20:31
立马横枪，精忠报国，清舟的制作很大气，千军万马中一骑跃起，誓把匈奴全消灭

匈奴人是夏朝遗民，也是华夏民族。与匈奴的战争是同族之争，千万别全消灭。

小辣椒 发表于 2022-9-1 21:01

这个音乐大气，配的图图更加大气{:4_178:}

元时务 发表于 2022-9-1 21:02

绿叶清舟 发表于 2022-9-1 20:56
马甲还没脱啊

天凉了，披上正好

加林森 发表于 2022-9-1 21:08

元时务 发表于 2022-9-1 21:02
天凉了，披上正好

老元好。披挂上阵了哇。{:4_189:}

红影 发表于 2022-9-1 21:59

绿叶清舟 发表于 2022-9-1 20:51
只能纸上解解气了

鼓起的士气到时候会派上用场的{:4_187:}
页: [1] 2
查看完整版本: 满江红