马黑黑 发表于 2022-7-20 12:42

粥菇凉可以顺向骑行去月亮了

<style>
.mama5 { position: relative; margin-top: 120px; left: -202px; width: 1000px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/62d66807f54cd3f93779bd0f.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
#bird {
      position: absolute;
      width: 73px;
      height: 83px;
        left: 0;
        top: 0;
      transition: left 2s, top 2s;
}



</style>

<div class="mama5">       
</div>
<img id="bird" src="https://pic.imgdb.cn/item/62d66822f54cd3f9377a3e2a.gif" alt="">

<audio class="aud" src="http://music.163.com/song/media/outer/url?id=28457952.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let lastX = 0;

document.addEventListener('click', (e) => {
      e = event || window.event;
      let x = e.pageX, y = e.pageY,
                w = document.body.clientWidth, h = document.body.clientHeight,
                bw = bird.offsetWidth, bh = bird.offsetHeight;
      if(x + bw >= w) x = w - bw;
      if(y + bh >= h) y = h - bh;
      bird.style.transform = x > lastX ? 'rotateY(0deg)' : 'rotateY(-180deg)';
      console.log(x,lastX,x > lastX);
      lastX = x;
      bird.style.left = x + 'px';
      bird.style.top = y + 'px';
});

</script>

马黑黑 发表于 2022-7-20 12:46

倒骑危险，看不见红绿灯和行人。

关键代码：

一、CSS transition 不能用负数

二、JS：根据图片朝向设定 rotateY 角度

bird.style.transform = x > lastX ? 'rotateY(0deg)' : 'rotateY(-180deg)';

-180用 180 也行，关键是三元运算句子中的前后值调换一下位置

浣溪沙 发表于 2022-7-20 13:23

哈哈哈，她们到我的回复框里来了{:4_172:}

加林森 发表于 2022-7-20 13:33

这个挺好玩的。

绿叶清舟 发表于 2022-7-20 15:58

感觉在这里跑得快啊

樵歌 发表于 2022-7-20 18:11

给俺来一辆，俺要穿越找人{:4_173:}

马黑黑 发表于 2022-7-20 19:01

樵歌 发表于 2022-7-20 18:11
给俺来一辆，俺要穿越找人

找阿芳呀？听说在火星呢

马黑黑 发表于 2022-7-20 19:02

浣溪沙 发表于 2022-7-20 13:23
哈哈哈，她们到我的回复框里来了

好玩吧

马黑黑 发表于 2022-7-20 19:03

绿叶清舟 发表于 2022-7-20 15:58
感觉在这里跑得快啊
这是transition的设定，2s，你原来设定的是20好几，还有负数

马黑黑 发表于 2022-7-20 19:03

加林森 发表于 2022-7-20 13:33
这个挺好玩的。

粥菇凉的

加林森 发表于 2022-7-20 19:04

马黑黑 发表于 2022-7-20 19:03
粥菇凉的

可以的可以的

马黑黑 发表于 2022-7-20 19:05

加林森 发表于 2022-7-20 19:04
可以的可以的

你也骑骑看

加林森 发表于 2022-7-20 19:12

马黑黑 发表于 2022-7-20 19:05
你也骑骑看

现在骑不动了。

马黑黑 发表于 2022-7-20 19:17

加林森 发表于 2022-7-20 19:12
现在骑不动了。

额，服输啦

绿叶清舟 发表于 2022-7-20 19:31

马黑黑 发表于 2022-7-20 19:03
这是transition的设定，2s，你原来设定的是20好几，还有负数

当时想改位置的，可能眼一花改那去了{:4_189:}

红影 发表于 2022-7-20 19:35

现在完全是正骑了，不玩倒骑的高难度了{:4_173:}

马黑黑 发表于 2022-7-20 19:53

红影 发表于 2022-7-20 19:35
现在完全是正骑了，不玩倒骑的高难度了

安全第一

马黑黑 发表于 2022-7-20 19:53

绿叶清舟 发表于 2022-7-20 19:31
当时想改位置的，可能眼一花改那去了

正常正常

绿叶清舟 发表于 2022-7-20 19:58

马黑黑 发表于 2022-7-20 19:53
正常正常

这个数字越大是越慢的吧

马黑黑 发表于 2022-7-20 20:43

绿叶清舟 发表于 2022-7-20 19:58
这个数字越大是越慢的吧

以秒为单位，2s是 2 seconds 的意思
页: [1] 2 3 4
查看完整版本: 粥菇凉可以顺向骑行去月亮了