大猫咪 发表于 2022-4-4 21:54

老黑来了，喝酒去 （继续学习帖）

本帖最后由 大猫咪 于 2022-4-4 22:17 编辑 <br /><br />
<style>

#bgBox { position:relative; left: -5px; width: 600px; height: 280px; background-image: url('https://s3.bmp.ovh/imgs/2022/04/04/3b5e3870e9803cc3.gif'); background-size: 600px 300px; background-position: 770px 0; opacity: .75; animation: mv 5s linear infinite; }
#clkBtn { width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 0, 0, .8); cursor: pointer; position: relative; }
#clkBtn::before { content: ''; position: absolute; left: 5px; top: 5px; background: rgba(0, 0, 0, .2); width: 88px; height: 88px; border: 1px solid #555; border-radius: 50%; }
#zhizhen { position: absolute; left: 50px; top: 50px; width: 2px; height: 44px; background: red; transform-origin: 0 0; animation: go 3s linear infinite; }
@keyframes go { to { transform: rotate(360deg);} }
@keyframes mv { from { background-position: 400px 0; } to { background-position: 0 0; } }

</style>

<div id="bgBox">
      <div id="clkBtn" style="left: 20px; top: calc(100% - 120px);">
                <div id="zhizhen"></div>
      </div>
      <audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=1840007566.mp3" ></audio>
</div>

<script language="javascript">
var aud = document.getElementById('music');
var btn = document.getElementById('clkBtn');
var zz = document.getElementById('zhizhen');
btn.onclick = function(){ aud.paused ? (aud.play(), zz.style.animationPlayState = "running") : (aud.pause(), zz.style.animationPlayState = "paused"); }
aud.addEventListener("ended", function(){ zz.style.animationPlayState = "running"; });
</script>

大猫咪 发表于 2022-4-4 22:10

本帖最后由 大猫咪 于 2022-4-4 22:25 编辑 <br /><br />
<style>

#bgBox { position:relative; left: -5px; width: 600px; height: 280px; background-image: url('https://s3.bmp.ovh/imgs/2022/04/04/3b5e3870e9803cc3.gif'); background-size: 600px 300px; background-position: 770px 0; opacity: .75; animation: mv 5s linear infinite; }
#clkBtn { width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 0, 0, .8); cursor: pointer; position: relative; }
#clkBtn::before { content: ''; position: absolute; left: 5px; top: 5px; background: rgba(0, 0, 0, .2); width: 88px; height: 88px; border: 1px solid #555; border-radius: 50%; }
#zhizhen { position: absolute; left: 50px; top: 50px; width: 2px; height: 44px; background: red; transform-origin: 0 0; animation: go 3s linear infinite; }
@keyframes go { to { transform: rotate(360deg);} }
@keyframes mv { from { background-position: 400px 0; } to { background-position: 0 0; } }

</style>

<div id="bgBox">
      <div id="clkBtn" style="left: 20px; top: calc(100% - 120px);">
                <div id="zhizhen"></div>
      </div>
      <audio id="music" autoplay="autoplay" loop="loop" src="" ></audio>
</div>

<script language="javascript">
var aud = document.getElementById('music');
var btn = document.getElementById('clkBtn');
var zz = document.getElementById('zhizhen');
btn.onclick = function(){ aud.paused ? (aud.play(), zz.style.animationPlayState = "running") : (aud.pause(), zz.style.animationPlayState = "paused"); }
aud.addEventListener("ended", function(){ zz.style.animationPlayState = "running"; });
</script>

加林森 发表于 2022-4-4 22:15

猫猫这个动态图制作得真好。{:4_199:}

红影 发表于 2022-4-4 22:26

这豹子跑得好快啊，一往无前，好棒{:4_187:}

大猫咪 发表于 2022-4-4 22:27

红影 发表于 2022-4-4 22:26
这豹子跑得好快啊，一往无前，好棒

哈哈红影不知道为什么不能换2个不同的图片    {:4_189:}

大猫咪 发表于 2022-4-4 22:27

加林森 发表于 2022-4-4 22:15
猫猫这个动态图制作得真好。

谢谢队长 {:4_179:}

红影 发表于 2022-4-4 22:29

大猫咪 发表于 2022-4-4 22:27
哈哈红影不知道为什么不能换2个不同的图片

应该可以的吧，但不是这个代码，我记得有很多张都可以放一起的。

大猫咪 发表于 2022-4-4 22:30

红影 发表于 2022-4-4 22:29
应该可以的吧，但不是这个代码，我记得有很多张都可以放一起的。

嗯嗯   慢慢学习{:4_204:}

加林森 发表于 2022-4-4 22:58

大猫咪 发表于 2022-4-4 22:27
谢谢队长

不客气的啊。{:4_179:}

红影 发表于 2022-4-5 20:22

大猫咪 发表于 2022-4-4 22:30
嗯嗯   慢慢学习

这音乐配得真不错{:4_173:}

大猫咪 发表于 2022-4-5 20:27

红影 发表于 2022-4-5 20:22
这音乐配得真不错

熟悉吧 {:5_117:}

马黑黑 发表于 2022-4-5 20:49

这几个企鹅还木有喝醉

大猫咪 发表于 2022-4-5 20:54

马黑黑 发表于 2022-4-5 20:49
这几个企鹅还木有喝醉

老黑的茅台还没拿出来这不来找了 {:5_117:}

马黑黑 发表于 2022-4-5 23:03

大猫咪 发表于 2022-4-5 20:54
老黑的茅台还没拿出来这不来找了

把它们都灌醉

红影 发表于 2022-4-5 23:07

大猫咪 发表于 2022-4-5 20:27
熟悉吧

是啊，动物世界的曲子吧{:4_173:}

加林森 发表于 2022-4-5 23:17

挺好玩的。
页: [1]
查看完整版本: 老黑来了，喝酒去 （继续学习帖）