斯卡布罗集市 TO马黑黑
本帖最后由 东篱闲人 于 2022-3-17 15:32 编辑 <br /><br /><div style="LEFT: -100px; WIDTH: 960px; POSITION: relative; TOP: 130px"><div style="float:left;border:solid 1px 000;"><img src="https://s1.ax1x.com/2022/03/17/q9o2xP.jpg"></div>
<style>
#bgBox { position:relative; left: 383px; top: 43px;width: 770px; height: 433px; background-image: url background-size: 770px 433px; background-position: 770px 0; opacity: .75; animation:}
#clkBtn { width: 50px; height: 50px; 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: 40px; height: 40px; border: 1px solid #555; border-radius: 50%; }
#zhizhen { position: absolute; left: 25px; top: 25px; width: 2px; height: 25px; background: red; transform-origin: 0 0;animation: go 25s linear infinite;}
@keyframes go { to { transform: rotate(360deg);} }
</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=25707169.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>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 帮着喊：@马黑黑 老兄你代码是不是多了一个啊？又不能评分了。我晕。 看CSS代码：
<style>
#bgBox { position:relative; left: 383px; top: 43px;width: 770px; height: 433px; background-image: url background-size: 770px 433px; background-position: 770px 0; opacity: .75; animation: mv 5s linear infinite; }
#clkBtn { width: 50px; height: 50px; 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: 40px; height: 40px; border: 1px solid #555; border-radius: 50%; }
#zhizhen { position: absolute; left: 25px; top: 25px; width: 2px; height: 25px; background: red; transform-origin: 0 0; animation: go 25s linear infinite; }
@keyframes go { to { transform: rotate(360deg);} }
</style>
父盒子想调用 mv 动画，但CSS代码里没有提供。CSS动画仅一个，@keyframes go {。。。}，缺一个。
不能评分与父盒子的left与top值有关，这个帖子不需要设定，因为它的宽度刚好，删掉试试。
东篱大哥把指针按钮做到大楼钟表上去了，这个创意好。{:4_199:} 加林森 发表于 2022-3-17 13:36
帮着喊：@马黑黑 老兄你代码是不是多了一个啊？又不能评分了。我晕。
也没太整明白，瞎套呢。。。{:4_189:} 马黑黑 发表于 2022-3-17 14:09
看CSS代码：
试了，这个animation: go 25s linear infinite;不能删，删了小表就不走了。。。{:5_117:} 红影 发表于 2022-3-17 14:28
东篱大哥把指针按钮做到大楼钟表上去了，这个创意好。
还和谐吧？{:5_117:} 东篱闲人 发表于 2022-3-17 15:33
也没太整明白，瞎套呢。。。
我们继续晕啊{:4_189:} 奇怪奇怪，我一加精就可以评分了。好霸道的代码。{:4_189:} 东篱闲人 发表于 2022-3-17 15:34
试了，这个animation: go 25s linear infinite;不能删，删了小表就不走了。。。
我说删的是父盒子的left和top，如果不需要 红影 发表于 2022-3-17 14:28
东篱大哥把指针按钮做到大楼钟表上去了，这个创意好。
我也非常欣赏这一点 这个我会唱英文版的 东篱闲人 发表于 2022-3-17 15:34
还和谐吧？
很棒的构思，给东篱大哥点赞{:4_187:} 马黑黑 发表于 2022-3-17 18:09
我也非常欣赏这一点
做图时的奇思妙想很重要的。 加林森 发表于 2022-3-17 16:48
奇怪奇怪，我一加精就可以评分了。好霸道的代码。
厉害吧？{:4_170:} 马黑黑 发表于 2022-3-17 18:11
这个我会唱英文版的
唱一个！{:5_112:} 红影 发表于 2022-3-17 18:21
很棒的构思，给东篱大哥点赞
喝水！{:4_190:}{:4_170:} 东篱闲人 发表于 2022-3-17 19:01
厉害吧？
佩服佩服。。。。{:4_189:} 加林森 发表于 2022-3-17 19:06
佩服佩服。。。。
以后你的操作程序就明确了。。。{:4_172:} 东篱闲人 发表于 2022-3-17 19:08
以后你的操作程序就明确了。。。
不干{:5_158:}