《男儿当自强 (DJ版)》 -- 林子祥 （练习老黑教程）
本帖最后由 加林森 于 2022-3-27 17:40 编辑 <br /><br /><style>#bgBox { position:relative; left: -5px; width: 800px; height: 430px; background-image: url('https://pic.imgdb.cn/item/62402eb227f86abb2ade6987.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://www.kumeiwp.com/sub/filestores/2022/03/27/eb37a0af360e080135f27bdb4c9eacc2.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 18:56
不错哈，蒙太奇的说
挺好玩的。{:4_189:} 这个好，动图做滚动图片，跟看电影似的。这个帖子漂亮{:4_199:} 队长的帖子真是越做越有创意{:4_187:} 红影 发表于 2022-3-27 20:13
这个好，动图做滚动图片，跟看电影似的。这个帖子漂亮
谢谢红影支持！{:4_204:} 红影 发表于 2022-3-27 20:13
队长的帖子真是越做越有创意
哈哈，加点创意就行了。{:4_204:} 好创意，队长还氺用动图制作的 真棒！想看电影{:5_106:}{:4_204:} 大猫咪 发表于 2022-3-27 21:31
好创意，队长还氺用动图制作的 真棒！想看电影
这样就更加好玩了。{:4_190:} 加林森 发表于 2022-3-27 21:33
这样就更加好玩了。
嗯嗯 看画面听歌很不错{:4_187:} 大猫咪 发表于 2022-3-27 21:34
嗯嗯 看画面听歌很不错
就是，以后你也可以去找这样的动态图片，然后再制作出来的。{:4_190:} 加林森 发表于 2022-3-27 21:36
就是，以后你也可以去找这样的动态图片，然后再制作出来的。
好的{:4_179:} 大猫咪 发表于 2022-3-27 21:37
好的
还要调整长与宽度的，记得才行。{:4_179:} 加林森 发表于 2022-3-27 21:44
还要调整长与宽度的，记得才行。
好的队长{:4_179:} 大猫咪 发表于 2022-3-27 21:44
好的队长
好的好的。{:4_179:} 队长这个制作真棒啊象看电影了 绿叶清舟 发表于 2022-3-27 22:11
队长这个制作真棒啊象看电影了
嗯嗯，今天中午制作的，主要是想能不能运用，结果还挺好的。 加林森 发表于 2022-3-27 19:24
挺好玩的。
嗯，好玩的 马黑黑 发表于 2022-3-27 22:29
嗯，好玩的
就是。我在看你在文字教程呢。
页:
[1]
2