绿叶清舟 发表于 2022-7-19 16:22

带我飞向月球

本帖最后由 绿叶清舟 于 2022-7-20 19:32 编辑 <br /><br /><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;
      transition: left 10s, 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-19 19:53

沙发我的{:4_174:}

小辣椒 发表于 2022-7-19 19:53

小人儿一直跟着我打字，不肯离开我的鼠标{:4_170:}

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

小辣椒 发表于 2022-7-19 19:53
小人儿一直跟着我打字，不肯离开我的鼠标

谢谢辣椒，想要你带他去月球了{:4_189:}

小辣椒 发表于 2022-7-19 20:58

绿叶清舟 发表于 2022-7-19 20:55
谢谢辣椒，想要你带他去月球了

清舟这个制作非常的棒~~~{:4_178:}

绿叶清舟 发表于 2022-7-19 21:03

小辣椒 发表于 2022-7-19 20:58
清舟这个制作非常的棒~~~

今天正好听到这首曲，就想到这个效果的了

红影 发表于 2022-7-19 21:13

月球里还有这骑车人的影子呢，这个好玩，真的可以跑到月球呢{:4_187:}

红影 发表于 2022-7-19 21:13

清舟这个制作太有趣了{:4_199:}

马黑黑 发表于 2022-7-19 21:21

倒骑功夫一流。曾经，专门学过，终究不会

绿叶清舟 发表于 2022-7-19 21:27

红影 发表于 2022-7-19 21:13
月球里还有这骑车人的影子呢，这个好玩，真的可以跑到月球呢

就是月亮小了点{:4_189:}

绿叶清舟 发表于 2022-7-19 21:27

马黑黑 发表于 2022-7-19 21:21
倒骑功夫一流。曾经，专门学过，终究不会

每次还总是先倒着来的了

马黑黑 发表于 2022-7-19 21:28

绿叶清舟 发表于 2022-7-19 21:27
每次还总是先倒着来的了

好功夫

绿叶清舟 发表于 2022-7-19 21:30

马黑黑 发表于 2022-7-19 21:28
好功夫

点到第三次才转身的

马黑黑 发表于 2022-7-19 21:31

绿叶清舟 发表于 2022-7-19 21:30
点到第三次才转身的

但都是倒骑

绿叶清舟 发表于 2022-7-19 21:32

马黑黑 发表于 2022-7-19 21:31
但都是倒骑

就是啊，早知道就把图片转个向了

马黑黑 发表于 2022-7-19 21:33

绿叶清舟 发表于 2022-7-19 21:32
就是啊，早知道就把图片转个向了

不用呀，这只是个方向问题

马黑黑 发表于 2022-7-19 21:34

绿叶清舟 发表于 2022-7-19 21:32
就是啊，早知道就把图片转个向了

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

试着把红色的数字变为负数看看

红影 发表于 2022-7-20 10:26

绿叶清舟 发表于 2022-7-19 21:27
就是月亮小了点

正好，这样显得远，否则那么近飞上去就不显得厉害了{:4_189:}

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

马黑黑 发表于 2022-7-19 21:34
bird.style.transform = x > lastX ? 'rotateY(180deg)' : 'rotateY(0deg)';

试着把红色的数字变为负 ...

改过以后车技又上升了，有时正有时倒的了

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

红影 发表于 2022-7-20 10:26
正好，这样显得远，否则那么近飞上去就不显得厉害了

就是要正好飞到月球有点困难了
页: [1] 2 3
查看完整版本: 带我飞向月球