大猫咪 发表于 2022-3-27 12:05

继续学习

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

#bgBox { position:relative; left: -5px; width: 600px; height: 280px; background-image: url('https://s3.bmp.ovh/imgs/2022/03/a9885cd7cad0debd.gif'); background-size: 770px 433px; 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=1827002464.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-27 12:11

复习巩固

歌曲不错。画面精彩。

大猫咪 发表于 2022-3-27 12:13

本帖最后由 大猫咪 于 2022-3-27 12:14 编辑

马黑黑 发表于 2022-3-27 12:11
复习巩固

歌曲不错。画面精彩。
谢谢老黑   {:4_179:}怎么是倒退着走{:4_190:}{:5_117:}

马黑黑 发表于 2022-3-27 12:16

大猫咪 发表于 2022-3-27 12:13
谢谢老黑   怎么是倒退着走

战争中，这是防卫性进攻，有点像足球后卫的处理对方进攻的机制

大猫咪 发表于 2022-3-27 12:20

马黑黑 发表于 2022-3-27 12:16
战争中，这是防卫性进攻，有点像足球后卫的处理对方进攻的机制

{:4_170:} 原来图片就是这样倒着走的   {:5_106:}

加林森 发表于 2022-3-27 12:20

猫猫又制作了一个出来，真好。{:4_204:}{:4_190:}

大猫咪 发表于 2022-3-27 12:21

加林森 发表于 2022-3-27 12:20
猫猫又制作了一个出来，真好。

哈哈   谢谢队长{:4_187:}图片倒着走的{:4_189:}

闲言不语 发表于 2022-3-27 12:23

这是沙场练兵的节奏{:4_199:}

加林森 发表于 2022-3-27 12:25

大猫咪 发表于 2022-3-27 12:21
哈哈   谢谢队长图片倒着走的

没关系的，挺好看的。{:4_190:}

大猫咪 发表于 2022-3-27 12:25

闲言不语 发表于 2022-3-27 12:23
这是沙场练兵的节奏

不语兄来了 ，开心！ {:4_187:}周末快乐！{:4_190:}

大猫咪 发表于 2022-3-27 12:26

加林森 发表于 2022-3-27 12:25
没关系的，挺好看的。

{:4_179:}嗯嗯

加林森 发表于 2022-3-27 12:29

大猫咪 发表于 2022-3-27 12:26
嗯嗯

恭喜你的成功！{:4_179:}

红影 发表于 2022-3-27 13:50

歌曲很雄壮，这个制作有趣{:4_187:}

樵歌 发表于 2022-3-27 13:52

大踏步后退，到退无可退时便无须再退了。{:4_173:}

红影 发表于 2022-3-27 13:52

大猫咪 发表于 2022-3-27 12:20
原来图片就是这样倒着走的

@keyframes mv { from { background-position: -400px 0; } to { background-position: 0 0; } }
把-400px的负号去掉就是正走了{:4_173:}

大猫咪 发表于 2022-3-27 13:54

樵歌 发表于 2022-3-27 13:52
大踏步后退，到退无可退时便无须再退了。

哈哈   樵哥哥下午好{:4_179:} 不能在退了   {:4_170:}

大猫咪 发表于 2022-3-27 13:54

红影 发表于 2022-3-27 13:52
@keyframes mv { from { background-position: -400px 0; } to { background-position: 0 0; } }
把-400 ...

谢谢红影{:4_179:}我去看看{:5_117:}

樵歌 发表于 2022-3-27 14:13

大猫咪 发表于 2022-3-27 13:54
哈哈   樵哥哥下午好   不能在退了

看到了果然一往无前了{:4_189:}

大猫咪 发表于 2022-3-27 14:20

樵歌 发表于 2022-3-27 14:13
看到了果然一往无前了

哈哈   开始前进了{:4_170:}

加林森 发表于 2022-3-27 17:16

现在向前冲了，好强大的音乐。猫猫真不错的。{:4_199:}
页: [1] 2
查看完整版本: 继续学习