《享受这一刻宁静》 - Slim Fey TO：马黑黑
本帖最后由 加林森 于 2022-3-17 14:34 编辑 <br /><br /><div class="myBox"><style>
#bgBox { position:relative; left: -5px; width: 770px; height: 433px; background-image: url('https://pic.imgdb.cn/item/62318b8b5baa1a80abdabc54.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=1364586007.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></div></div></div></div> @马黑黑 感谢老黑教我们的教程，现在送你一首纯音乐，表示感谢！{:4_190:} 队长又做一个啊，看到黑黑那个无缝连接的帖子，觉得做这类帖子最好两端接近的图图才好。
音乐很好听，黑黑收礼开心{:4_187:} 马黑黑收礼开森 风景很不错，吃完饭来帖子里轻松一下还是很不错的{:4_187:} 红影 发表于 2022-3-16 18:10
队长又做一个啊，看到黑黑那个无缝连接的帖子，觉得做这类帖子最好两端接近的图图才好。
音乐很好听，黑黑 ...
我只用了一张图片的。 马黑黑 发表于 2022-3-16 18:11
马黑黑收礼开森
好的好的 队长学习真快，制作很漂亮，赞，空了猫也学习，老黑真厉害 {:4_191:}
{:4_204:} 大猫咪 发表于 2022-3-16 19:48
队长学习真快，制作很漂亮，赞，空了猫也学习，老黑真厉害
就是就是，猫猫也来玩。{:4_191:}{:4_179:} 加林森 发表于 2022-3-16 18:29
我只用了一张图片的。
黑黑的这个例子都是一张图的啊。 不注意看以为是船上美女在退，原来图片有移动，队长厉害。{:4_199:} 红影 发表于 2022-3-16 20:18
黑黑的这个例子都是一张图的啊。
我还没有完全容入的 樵歌 发表于 2022-3-16 20:22
不注意看以为是船上美女在退，原来图片有移动，队长厉害。
都是老黑教的。{:4_190:} 加林森 发表于 2022-3-16 20:14
就是就是，猫猫也来玩。
嗯嗯 必须滴 {:4_187:} 大猫咪 发表于 2022-3-16 20:26
嗯嗯 必须滴
好的好的，有猫猫在一起玩就很开心的。{:4_190:}{:4_179:} 加林森 发表于 2022-3-16 20:28
好的好的，有猫猫在一起玩就很开心的。
{:4_179:}继续温暖 大猫咪 发表于 2022-3-16 20:29
继续温暖
好的好的。{:4_179:} 队长做的挺好的，悟性十足啊{:4_199:} 千羽 发表于 2022-3-16 21:57
队长做的挺好的，悟性十足啊
感谢感谢！{:4_204:} 加林森 发表于 2022-3-16 20:24
我还没有完全容入的
头尾接近的话，就看不出图片有明显接缝了。
页:
[1]
2