加林森 发表于 2022-10-9 20:06

那年夏天，阳光正好 （学习老黑人静）


<style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://pic1.imgdb.cn/item/63425d0116f2c2beb13e4d1f.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#tit { position: absolute; left: 270px; top: 220px; font: bold 2.5em sans-serif; color: #ccc; text-shadow: 2px 2px 4px #b00429; letter-spacing: 2px; }
#btnplay { position: absolute; bottom: 40px; left: 100px; width: 100px; height: 100px; border-radius: 50%; box-shadow: 20px 15px 0 0 yellow; cursor: pointer; animation: swing 1s linear infinite alternate; }
#btnplay::before { position: absolute; content: ''; left: 20px; top: 15px; width: 100%; height: 100%;}
#btnplay::after { position: absolute; content: ''; left: 30px; top: 30px; width: 30%; height: 30%; border-radius: 50%; background: yellow; box-shadow: 0 0 30px 0px yellow, 0 0 100px 0 snow; }
@keyframes swing { from { transform: rotate(0deg); } to { transform: rotate(30deg); } }
</style>

<div id="papa">
      <span id="tit">那年夏天 阳光正好</span>
      <span id="btnplay" title="播放/暂停"></span>
</div>

<script>
(function() {
      let aud = new Audio();
      aud.src = 'https://music.163.com/song/media/outer/url?id=428391474.mp3';
      aud.loop = true;
      aud.play();
      btnplay.style.animationPlayState = aud.paused ? 'paused' : 'running';
      btnplay.onclick = () => mplay();
      let mplay = () => aud.paused ? (aud.play(), btnplay.style.animationPlayState = 'running') : (aud.pause(), btnplay.style.animationPlayState = 'paused');
}());
</script>

加林森 发表于 2022-10-9 20:06

@马黑黑

加林森 发表于 2022-10-9 20:07

第一次学习，不知道行不行？

马黑黑 发表于 2022-10-9 20:12

队长身体康复了？制作的真好

加林森 发表于 2022-10-9 20:14

马黑黑 发表于 2022-10-9 20:12
队长身体康复了？制作的真好

谢谢老黑！恢复第一次。

小辣椒 发表于 2022-10-9 20:50

队长作业出来了啊，我都没有做的{:4_201:}

小辣椒 发表于 2022-10-9 20:50

欣赏队长的精彩制作{:4_177:}

小辣椒 发表于 2022-10-9 20:51

队长身体刚恢复不要太累的

红影 发表于 2022-10-9 21:07

这个制作真漂亮，队长很有审美眼光{:4_187:}

千羽 发表于 2022-10-9 21:09

队长的图做得挺好的，学的真快{:4_187:}

醉美水芙蓉 发表于 2022-10-9 21:14

相约爱晚亭 发表于 2022-10-10 07:49

欣赏音画佳作！

上海朝阳 发表于 2022-10-10 08:18

古城夕阳，真美。

梦缘 发表于 2022-10-10 10:49

安静的夏天，欣赏问好！{:4_204:}

加林森 发表于 2022-10-10 12:38

小辣椒 发表于 2022-10-9 20:50
队长作业出来了啊，我都没有做的

看着手痒了，就制作一个出来。{:4_189:}

加林森 发表于 2022-10-10 12:39

小辣椒 发表于 2022-10-9 20:50
欣赏队长的精彩制作

谢谢。我才开会回家。

加林森 发表于 2022-10-10 12:39

小辣椒 发表于 2022-10-9 20:51
队长身体刚恢复不要太累的

嗯嗯。

加林森 发表于 2022-10-10 12:40

红影 发表于 2022-10-9 21:07
这个制作真漂亮，队长很有审美眼光

谢谢红影。{:4_190:}

加林森 发表于 2022-10-10 12:40

千羽 发表于 2022-10-9 21:09
队长的图做得挺好的，学的真快

谢谢千羽支持！中午好！{:4_190:}

加林森 发表于 2022-10-10 12:41

醉美水芙蓉 发表于 2022-10-9 21:14
欣赏队长佳作！

谢谢支持！
页: [1] 2
查看完整版本: 那年夏天，阳光正好 （学习老黑人静）