春姑娘在荡秋千，燕子穿空，春光明媚，山寺桃花格外红艳，好一幅生机盎然的春光美！{:4_187:}
千羽 发表于 2022-3-14 22:15
哈哈，是照你的代码做的啊，按钮还没学好
羽儿的制作更美{:4_187:}
千羽 发表于 2022-3-14 22:16
是以前做的图
很有味道的啊
樵歌 发表于 2022-3-15 07:32
春姑娘在荡秋千，燕子穿空，春光明媚，山寺桃花格外红艳，好一幅生机盎然的春光美！
晚上好樵歌老师{:4_187:}
红影 发表于 2022-3-15 12:25
羽儿的制作更美
我还是喜欢你那亮眼的图，排版也更美{:4_179:}
绿叶清舟 发表于 2022-3-15 17:06
很有味道的啊
问好清舟{:4_187:}
千羽 发表于 2022-3-16 19:49
问好清舟
千羽晚上好
千羽 发表于 2022-3-16 19:47
晚上好樵歌老师
一起嗨皮哈{:4_173:}
樵歌 发表于 2022-3-16 20:19
一起嗨皮哈
好的{:4_205:}
千羽，你能不能把这个播放器换了？你去看看见他老黑发的播放器教程，他那个很漂亮的。
加林森 发表于 2022-3-16 20:46
千羽，你能不能把这个播放器换了？你去看看见他老黑发的播放器教程，他那个很漂亮的。
好的，在哪？我去看看{:4_181:}
千羽 发表于 2022-3-16 20:47
好的，在哪？我去看看
就在水区啊。
加林森 发表于 2022-3-16 20:48
就在水区啊。
<style>
#bgBox { position:relative; left: -5px; width: 770px; height: 433px; background-image: url('/data/attachment/forum/202203/16/104639dmsilzfwnlm6fw6m.jpg'); 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: -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=141261.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-16 20:48
就在水区啊。
<style>
#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);} }
</style>
<div id="clkBtn">
<div id="zhizhen"></div>
</div>
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=141261.mp3.mp3" ></audio>
<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-16 21:23
#clkBtn { width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 0, 0, .8); cur ...
你去制作一个吧。{:4_187:}
加林森 发表于 2022-3-16 21:26
你去制作一个吧。
嗯，有空了的哈{:4_181:}
千羽 发表于 2022-3-16 21:23
#clkBtn { width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 0, 0, .8); cur ...
你这个不对的，不能停下来。
千羽 发表于 2022-3-16 21:27
嗯，有空了的哈
好的好的。