追你（创意分享）
本帖最后由 马黑黑 于 2022-7-9 19:23 编辑 <br /><br /><style>#papa { margin: 50px auto 0; width: 720px; height: 600px; box-shadow: 4px 4px 24px #000; position: relative; }
#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>
<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,660), 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> 代码：
<style>
#papa { margin: 50px auto 0; width: 720px; height: 600px; box-shadow: 4px 4px 24px #000; position: relative; }
#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>
<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 19:42 编辑
先说一下创意：
这是猎手追猎物的构思，也可以是男追女或女追男，看怎么理解。
飞碟是 hunter，球球是 prey，各自使用了对应的 id。
prey 为了自保还是矜持等啥啥的吧，通过变量 aniFlag 的值（0或1）来隐藏或显示自己，transition 不设定，瞬间出现或消失；每一次的出现或消失，都随机定位（left和top随机变化），这个变化值的头尾设定有 num(0,600) 决定，0到600之间（含头尾），具体的区间应根据帖子父元素的尺寸来定，600这个大数分别由父元素的宽、高减去 hunter 和 prey 中尺寸最大的那个的宽、高。
prey的出现，不论隐身与否，hunter都有感知，都能在第二时间追上并作停留，直至 prey 去了下一个地方。
再说说JS（看注释）：
<script>
let aniFlag = 1; // prey动画运行标识 0 - 隐藏，1 - 现身
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min; //取随机整数（函数）
setTimeout(gogo,100); //第一次启动动画
// 动画函数：追
function gogo() {
let left = num(0,600), top = num(0,500); // 分别取left和top值，600和500依据是，父元素宽、高减去hunter和prey最大宽、高者
prey.style.left = left + 'px'; //猎物定位 left
prey.style.top = top + 'px'; //猎物定位 top
hunter.style.left = left + 'px'; /猎手定位 left
hunter.style.top = top + 'px'; /猎手定位 top
//根据 aniFlag 标识设定猎物是否现身
aniFlag == 1 ? (prey.style.opacity = '1', aniFlag = 0) : (prey.style.opacity = '0', aniFlag = 1);
setTimeout(gogo,6000);// 定时器递归调用本函数
}
</script>
需要理解的是，函数中定时器的时长与CSS中 hunter 的 transition 的时间存在关系，函数定时器的时长要大于CSS中 hunter 的 transition 时长。此外，hunter 和 prey 间，如果 prey 也设置 transition，则它的时长要小于 hunter 的。
外星人来抓人了啊 aniFlag = 1 这句，初始值设为 0 更好些 绿叶清舟 发表于 2022-7-9 19:32
外星人来抓人了啊
可能是追你 黑黑真会玩！{:5_116:} 马黑黑 发表于 2022-7-9 19:44
可能是追你
好啊，正好去外星住上几天 研究一下。 绿叶清舟 发表于 2022-7-9 19:59
好啊，正好去外星住上几天
好，那里不需要提供48小时的核酸检测报告 加林森 发表于 2022-7-9 20:38
研究一下。
这个非常简单的
东篱闲人 发表于 2022-7-9 19:55
黑黑真会玩！
玩球当然会，俺是前国家队队员的……………………………………那啥，粉丝 马黑黑 发表于 2022-7-9 20:39
这个非常简单的
我试一试。 加林森 发表于 2022-7-9 20:42
我试一试。
应该试试。我提供的仅是一个思路和核心实现手段。要用这个思路和技术，做些构思和设计，比如，猎鹰追鸽子什么的，都行 马黑黑 发表于 2022-7-9 20:39
好，那里不需要提供48小时的核酸检测报告
也不会这么热的吧 马黑黑 发表于 2022-7-9 20:44
应该试试。我提供的仅是一个思路和核心实现手段。要用这个思路和技术，做些构思和设计，比如，猎鹰追鸽子 ...
制作出来了，但是动态图片看不见呢？{:4_203:} 加林森 发表于 2022-7-9 21:08
制作出来了，但是动态图片看不见呢？
地址正常就能看见，看不见检查一下 绿叶清舟 发表于 2022-7-9 20:47
也不会这么热的吧
冷热没关系，人家有调控气候的能力 外星人爱好者{:4_189:} 马黑黑 发表于 2022-7-9 21:12
地址正常就能看见，看不见检查一下
好的。