绿叶清舟 发表于 2022-9-25 10:26

陌上花开

本帖最后由 绿叶清舟 于 2022-9-25 20:36 编辑 <br /><br /><style>
.mama5 { position: relative; margin-top: 120px; left: -202px; width: 1000px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/632fb52216f2c2beb1e6cecc.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
#bird {
      position: absolute;
left: 700px;
top: 980px;
      width: 73px;
      height: 83px;
      transition: left 10s, top 2s;
}



</style>

<div class="mama5">       
</div>
<img id="bird" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdl.glitter-graphics.net%2Fpub%2F2415%2F2415151fweh9n10ny.gif&refer=http%3A%2F%2Fdl.glitter-graphics.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666661803&t=517ebf019687b6a221b7b74f213ad0e9" alt="">

<audio class="aud" src="http://music.163.com/song/media/outer/url?id=511921300.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-9-25 11:04

还好，那颗心没来这里花{:4_170:}

马黑黑 发表于 2022-9-25 11:04

歌曲不错

加林森 发表于 2022-9-25 11:26

挺好听的。{:4_199:}

红影 发表于 2022-9-25 12:01

陌上花开，可缓缓归矣。
很淡雅的制作，欣赏清舟好帖{:4_187:}

梦油 发表于 2022-9-25 15:00

这个画面有意思

绿叶清舟 发表于 2022-9-25 19:11

马黑黑 发表于 2022-9-25 11:04
还好，那颗心没来这里花

把心拿来飞那不是白偷了{:4_189:}
本来想让蝴蝶做个鼠标跟随了，可是一定位到贴子里就不会点不动了，是不能用定位的吗

绿叶清舟 发表于 2022-9-25 19:12

加林森 发表于 2022-9-25 11:26
挺好听的。

谢谢队长，晚上好

绿叶清舟 发表于 2022-9-25 19:12

红影 发表于 2022-9-25 12:01
陌上花开，可缓缓归矣。
很淡雅的制作，欣赏清舟好帖

机票买不到{:4_189:}

马黑黑 发表于 2022-9-25 19:13

绿叶清舟 发表于 2022-9-25 19:11
把心拿来飞那不是白偷了
本来想让蝴蝶做个鼠标跟随了，可是一定位到贴子里就不会点不动了，是 ...

可以全局定位，也可以局部定位，这些我都有专讲的

绿叶清舟 发表于 2022-9-25 19:37

马黑黑 发表于 2022-9-25 19:13
可以全局定位，也可以局部定位，这些我都有专讲的

把定位加到#bird 这个里面，蝴蝶就只在原地动了

马黑黑 发表于 2022-9-25 20:00

绿叶清舟 发表于 2022-9-25 19:37
把定位加到#bird 这个里面，蝴蝶就只在原地动了

我不是说这个定位，我是说在限制它在某个区域里活动。你得去找找我以前的讨论。

绿叶清舟 发表于 2022-9-25 20:38

马黑黑 发表于 2022-9-25 20:00
我不是说这个定位，我是说在限制它在某个区域里活动。你得去找找我以前的讨论。

现在好了，开始用的https://www.huachaowang.com/forum.php?mod=viewthread&tid=61247&extra=page%3D11这个代码，一加了定位就不动了

绿叶清舟 发表于 2022-9-25 20:39

梦油 发表于 2022-9-25 15:00
这个画面有意思

听着这歌就这感受吧{:4_173:}

马黑黑 发表于 2022-9-25 20:51

绿叶清舟 发表于 2022-9-25 20:38
现在好了，开始用的https://www.huachaowang.com/forum.php?mod=viewthread&tid=61247&extra=page%3D11这 ...

慢慢探索

绿叶清舟 发表于 2022-9-25 20:56

马黑黑 发表于 2022-9-25 20:51
慢慢探索

不是在CSS里的吧，就看了上面，下面那一堆的看着就晕了

马黑黑 发表于 2022-9-25 21:08

绿叶清舟 发表于 2022-9-25 20:56
不是在CSS里的吧，就看了上面，下面那一堆的看着就晕了

这个不能单单靠CSS，主要是有JS控制

红影 发表于 2022-9-25 21:57

绿叶清舟 发表于 2022-9-25 19:12
机票买不到

主要，不是绿码，不给买票{:4_173:}

梦油 发表于 2022-9-26 09:44

绿叶清舟 发表于 2022-9-25 20:39
听着这歌就这感受吧

是的，清舟朋友。

大猫咪 发表于 2022-9-26 21:41

唯美制作，真棒    第一次听这歌，非常喜欢！

{:4_204:}{:4_199:}
页: [1] 2 3
查看完整版本: 陌上花开