无题（致东篱闲人）
<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://www.kumeiwp.com/sub/filestores/2022/03/16/2068180e237b8e853845cfc850274d10.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>
完整代码：
<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://www.kumeiwp.com/sub/filestores/2022/03/16/2068180e237b8e853845cfc850274d10.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>
这是送的东篱大哥什么礼物，宇航战舰么？呵呵，东篱大哥收礼开心{:4_187:} 太空战舰，准备开战了啊。{:4_199:} 本帖最后由 马黑黑 于 2022-3-16 12:02 编辑
关于时钟的位置：
<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/16/2068180e237b8e853845cfc850274d10.mp3" ></audio>
</div>
看红色部分代码，可以在HTML盒子代码里用行内CSS属性 style 来定义 左边（left）和上边（top）值，左边右移20px，上边，我放在左下角，所以用了一个算式，calc(100% - 120px)，calc 方法可以计算位置，100% 这里指整个父盒子的高度，因为时钟自身高度为100px，加上需要离父盒子底部边缘 20px 的距离以便于左边位置对应，所以减去120px；calc 算式有讲究，运算符号两头要有空格。
加林森 发表于 2022-3-16 11:41
太空战舰，准备开战了啊。
现在到处都是战火了 马黑黑 发表于 2022-3-16 11:42
现在到处都是战火了
厉害了 加林森 发表于 2022-3-16 11:49
厉害了
第三次世界大战一触即发 关于背景移动：
一、动画：改变背景图的位置
@keyframes mv { from { background-position: -770px 0; }
to { background-position: 0 0; }
}
这里，背景图片的位置从 -770px 0 的位置变为 0 0 的位置。之所以是 -770px 是因为盒子的宽度及背景图片的设定尺寸是 770px ——
二、父盒子相关CSS代码：
#bgBox {
position: relative;
left: -5px;
width: 770px;
height: 433px;
background-image: url('图片地址');
background-size: 770px 433px; /* 底图尺寸 */
background-position: 770px 0; /* 底图位置 */
opacity: .75;
animation: mv 5s linear infinite; /* 运行动画 */
}
马黑黑 发表于 2022-3-16 11:50
第三次世界大战一触即发
就是就是 加林森 发表于 2022-3-16 12:02
就是就是
{:4_190:} 老黑讲解得很清楚了，谢谢！{:4_190:} 马黑黑 发表于 2022-3-16 12:03
谢谢老黑。 加林森 发表于 2022-3-16 12:12
谢谢老黑。
不客气 加林森 发表于 2022-3-16 12:06
老黑讲解得很清楚了，谢谢！
这个不算太难 马黑黑 发表于 2022-3-16 12:31
这个不算太难
我已经根据你发的代码，制作了一个出来了，你帮着看看。 马黑黑 发表于 2022-3-16 12:30
不客气
应该的应该的 加林森 发表于 2022-3-16 12:42
应该的应该的
{:5_108:} 加林森 发表于 2022-3-16 12:41
我已经根据你发的代码，制作了一个出来了，你帮着看看。
看了，挺好的。你速度很快呀 马黑黑 发表于 2022-3-16 12:54
看了，挺好的。你速度很快呀
跟着你学习必须快的。{:5_108:}