大猫咪 发表于 2022-3-19 11:03

周末快乐！

本帖最后由 大猫咪 于 2022-3-19 11:14 编辑 <br /><br />
<style>

#bgBox { position:relative; left: -5px; width: 269px; height: 386px; background-image: url('https://s3.bmp.ovh/imgs/2022/03/b2aaff2289e80ccf.gif'); background-size: 269px 386px; 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: -770px 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=187076.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-3-19 12:19

哈哈，这个好玩，大猫咪的吉他弹得真好{:4_172:}

红影 发表于 2022-3-19 12:21

那个时钟按钮的转速也跟歌曲正好相配呢。周末了，一起舞起来{:4_208:}

加林森 发表于 2022-3-19 12:28

猫猫挺买力气的啊。好制作。{:4_199:}

朵嫣 发表于 2022-3-19 13:56

貓咪 週末愉快{:5_106:}

大猫咪 发表于 2022-3-19 16:57

朵嫣 发表于 2022-3-19 13:56
貓咪 週末愉快

朵嫣来了 {:5_106:}开心，周末快乐，春安好！{:4_204:}

大猫咪 发表于 2022-3-19 16:58

加林森 发表于 2022-3-19 12:28
猫猫挺买力气的啊。好制作。

谢谢队长{:5_106:}没制作好，图片比例不对，晚上来改   下午好！{:4_204:}

大猫咪 发表于 2022-3-19 16:59

红影 发表于 2022-3-19 12:21
那个时钟按钮的转速也跟歌曲正好相配呢。周末了，一起舞起来

周末一起嗨红影 {:5_106:}下午好 {:4_204:}

加林森 发表于 2022-3-19 17:12

大猫咪 发表于 2022-3-19 16:58
谢谢队长没制作好，图片比例不对，晚上来改   下午好！

猫猫下午好，不急的。{:4_204:}{:4_190:}

马黑黑 发表于 2022-3-19 18:23

半场演出，半点心意

顾-念 发表于 2022-3-19 20:39

这吉他弹挺帅

红影 发表于 2022-3-19 20:40

大猫咪 发表于 2022-3-19 16:59
周末一起嗨红影   下午好

猫猫太会玩了，这个帖子真欢乐{:4_173:}
页: [1]
查看完整版本: 周末快乐！