加林森 发表于 2022-7-9 21:41

动物世界【开头曲】 - L（根据老黑教程制作）

本帖最后由 加林森 于 2022-7-10 14:18 编辑 <br /><br /><style>
#papa { margin: 50px auto 0; width: 720px; height: 600px; background: #333 url('https://pic.imgdb.cn/item/62c990c5f54cd3f937271919.gif') no-repeat center/cover;
#hunter { position: absolute; width: 90px; height: 66px; transition: all 3s; z-index: 99; }
#prey { position: absolute; width: 60px; height: 60px; background: #333 linear-gradient(120deg,purple,tan); border-radius: 50%; }
</style>

<div id="papa">
      <imgid="hunter" alt="" src="/data/attachment/forum/202207/08/225900jzc7ctq9wa99r83a.gif" />
      <span id="prey"></span>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1840007566.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let aniFlag = 1;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;

setTimeout(gogo,100);

function gogo() {
      let left = num(0,960), top = num(0,500);
      prey.style.left = left + 'px';
      prey.style.top = top + 'px';
      hunter.style.left = left + 'px';
      hunter.style.top = top + 'px';
      aniFlag == 1 ? (prey.style.opacity = '1', aniFlag = 0) : (prey.style.opacity = '0', aniFlag = 1);
      setTimeout(gogo,6000);
}
</script>

加林森 发表于 2022-7-9 21:42

@马黑黑

马黑黑 发表于 2022-7-9 21:49

首先，帖子父元素设定为720的宽度，球球却要运行960的尺寸，这回飞到外边界的。我的介绍里说过尺寸的处理。

其次，帖子的背景图片单独打开可以，做帖子无法打开。

加林森 发表于 2022-7-9 21:51

马黑黑 发表于 2022-7-9 21:49
首先，帖子父元素设定为720的宽度，球球却要运行960的尺寸，这回飞到外边界的。我的介绍里说过尺寸的处理。 ...

嗯嗯，。我也试着用1024*600的图片，都不出来。

马黑黑 发表于 2022-7-9 22:06

加林森 发表于 2022-7-9 21:51
嗯嗯，。我也试着用1024*600的图片，都不出来。

背景图与尺寸无关，是那个地址不让用

加林森 发表于 2022-7-9 22:08

马黑黑 发表于 2022-7-9 22:06
背景图与尺寸无关，是那个地址不让用

啊？不应该啊。是百度的图片啊。

马黑黑 发表于 2022-7-9 22:09

加林森 发表于 2022-7-9 22:08
啊？不应该啊。是百度的图片啊。

百度图片谁说可以可以分享？百度的图片是防盗链的

加林森 发表于 2022-7-9 22:13

马黑黑 发表于 2022-7-9 22:09
百度图片谁说可以可以分享？百度的图片是防盗链的

https://pic.imgdb.cn/item/62c98c94f54cd3f9372076a2.jpg   这个也不出来。

马黑黑 发表于 2022-7-9 22:17

加林森 发表于 2022-7-9 22:13
https://pic.imgdb.cn/item/62c98c94f54cd3f9372076a2.jpg   这个也不出来。

你检查一下背景图片的语句。我们常用的语句是：

background: #333 url('图片地址') no-repeat center/cover;

加林森 发表于 2022-7-9 22:21

马黑黑 发表于 2022-7-9 22:17
你检查一下背景图片的语句。我们常用的语句是：

background: #333 url('图片地址') no-repeat center/ ...

现在对了，出来了。谢谢老黑！

加林森 发表于 2022-7-9 22:24

马黑黑 发表于 2022-7-9 22:17
你检查一下背景图片的语句。我们常用的语句是：

background: #333 url('图片地址') no-repeat center/ ...

我发出来了。{:5_108:}

马黑黑 发表于 2022-7-9 22:32

加林森 发表于 2022-7-9 22:24
我发出来了。

嗯嗯，挺好的。你就是太激动，把最简单的背景图设置都搞错了。我一眼能看出来，但我马上指出来，对你的进步没有好处，所以让你去自己查。

马黑黑 发表于 2022-7-9 22:32

加林森 发表于 2022-7-9 22:21
现在对了，出来了。谢谢老黑！

喝水{:4_190:}

加林森 发表于 2022-7-9 22:33

@马黑黑   现在是动态图了。

加林森 发表于 2022-7-9 22:34

马黑黑 发表于 2022-7-9 22:32
嗯嗯，挺好的。你就是太激动，把最简单的背景图设置都搞错了。我一眼能看出来，但我马上指出来，对你的进 ...

嗯嗯。谢谢！

加林森 发表于 2022-7-9 22:35

马黑黑 发表于 2022-7-9 22:32
喝水

要得要得。谢谢啊！

马黑黑 发表于 2022-7-9 23:43

加林森 发表于 2022-7-9 22:35
要得要得。谢谢啊！

{:5_108:}

加林森 发表于 2022-7-9 23:46

马黑黑 发表于 2022-7-9 23:43


明天见。谢谢啦！{:4_191:}

马黑黑 发表于 2022-7-9 23:47

加林森 发表于 2022-7-9 23:46
明天见。谢谢啦！

88

加林森 发表于 2022-7-9 23:48

马黑黑 发表于 2022-7-9 23:47
88

晚安！㇏
页: [1] 2 3 4
查看完整版本: 动物世界【开头曲】 - L（根据老黑教程制作）