论坛 › 欢乐水吧 › 牛郎织女（学习黑黑空中散步效果）

红影 发表于 2022-7-15 21:33

牛郎织女（学习黑黑空中散步效果）

<style>
#papa { left: -302px; top:120px; width: 1200px; height: 675px; box-shadow: 4px 4px 30px #000; background: #ccc url('https://pic.imgdb.cn/item/62cfd541f54cd3f9379673e0.jpg') no-repeat center / cover;border-radius: 6px; overflow: hidden; position: relative; }
#mama {position: absolute; width: inherit; height: inherit; left: 0; top: -675px; background: #ccc url('https://pic.imgdb.cn/item/62cfd567f54cd3f93796adaf.jpg') no-repeat center / cover; }
#mama input { border: none; outline: none; opacity: .75; cursor: pointer; }
#mama p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; top: 10px; padding: 10px; font: normal 1em sans-serif; color: #eee; background: rgba(255,255,255,.2); border-radius: 8px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
#papa > img { position: absolute; border: none; outline: none; }
#zhinv { left:200px; top: 0; width: 138px; height: 302px; transition: all 2s; }
#niulang { top: 330px; width: 109px; height: 336px; opacity: .5; cursor: pointer; }
@keyframes up { to { transform: translateY(-700px); } }
@keyframes down { to { top: 0px; } }
</style>

<div id="papa">
      <img id="zhinv" src="https://pic.imgdb.cn/item/62cfd696f54cd3f937985b51.png" alt="" />
      <img id="niulang" src="https://pic.imgdb.cn/item/62cfd6b7f54cd3f93798908f.png" alt="" />
      <div id="mama">
                <div class="playbox">
                        <p id="geci" style="font-size: 1.2em; text-shadow: 1px 1px 1px #222">stand by ... </p>
                        <p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
                              <input id="btnplay" type="button" value=">" />
                              <input id="slider" type="range" min="0" max="100" value="0" />
                              <span id="per">0%</span>
                        </p>
                </div>
      </div>
</div><br><br><br><br><br><br>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/02/02/ab1380bd5b65c29001dec78d15d20c0a.mp3" loop="loop"></audio>

<script>
let lrcAr = [ ['0.00','牛郎织女- 瑞鸣音乐'], ['120.00','美丽的传说永恒的爱情'] ];
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;

niulang.style.left = num(200,860) + 'px';
zhinv.style.left = num(200,860) + 'px';

niulang.onclick = () => {
      niulang.style.opacity = 1;
      zhinv.style.left = niulang.offsetLeft+ 102 + 'px';
      zhinv.style.top = niulang.offsetTop + 30 + 'px';
      setTimeout(() => {
                zhinv.style.animation = niulang.style.animation = 'up 4s forwards';
      },2200);
      setTimeout(() => {
                mama.style.animation = 'down 4s forwards';
                aud.play();
      },4300);
}

slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
      let prog = 100 * aud.currentTime / aud.duration;
      slider.value = prog;
      per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
      for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr) geci.innerHTML = lrcAr;
      }
});

let toMin = (val) => {
      if(!val) return '0:0';
      val = Math.floor(val);
      return parseInt(val / 60) + ':' +parseFloat(val % 60);
}
</script>

红影 发表于 2022-7-16 18:42

加林森 发表于 2022-7-16 14:39
我们这里从来没有这样热过的。

我看到网上的说法，是四大火炉要重新洗牌，成都进入火炉排行榜首了{:4_173:}

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

很浪漫温馨的样纸{:4_170:}

马黑黑 发表于 2022-7-15 21:35

有空俺也去放牛{:4_170:}

四海八荒 发表于 2022-7-15 21:36

马黑黑 发表于 2022-7-15 21:35
有空俺也去放牛

黑黑不是放猪的吗？{:4_173:}

四海八荒 发表于 2022-7-15 21:37

看上去，银河好窄的样子{:4_189:}

小辣椒 发表于 2022-7-15 21:43

亲爱的，这个太浪漫了{:4_170:}

小辣椒 发表于 2022-7-15 21:45

四海八荒 发表于 2022-7-15 21:37
看上去，银河好窄的样子

不荒，这个帖子浪漫吗，绝对的赞！{:4_178:}

马黑黑 发表于 2022-7-15 21:45

四海八荒 发表于 2022-7-15 21:36
黑黑不是放猪的吗？

放猪没啥机会{:4_170:}

四海八荒 发表于 2022-7-15 21:51

小辣椒 发表于 2022-7-15 21:45
不荒，这个帖子浪漫吗，绝对的赞！

突然想起来一首歌，相思是条河，也许就是银河！
帖子非常浪漫，{:4_173:}哪怕影子只发了一头牛，也能想象到牛郎就在附近，织女就在河对岸徘徊

小辣椒 发表于 2022-7-15 21:53

四海八荒 发表于 2022-7-15 21:51
突然想起来一首歌，相思是条河，也许就是银河！
帖子非常浪漫，哪怕影子只发了一头牛，也能想 ...

印脑子里了

四海八荒 发表于 2022-7-15 22:10

马黑黑 发表于 2022-7-15 21:45
放猪没啥机会

机会问题不在于放猪放牛，在于敢不敢偷美女衣服{:4_170:}

红影 发表于 2022-7-15 22:17

马黑黑 发表于 2022-7-15 21:34
很浪漫温馨的样纸

一年才见一次，这样的浪漫太苦了点。{:4_173:}

红影 发表于 2022-7-15 22:18

马黑黑 发表于 2022-7-15 21:35
有空俺也去放牛

早知道我多加几头牛了，现在就一只，牛郎自己放就够了{:4_173:}

红影 发表于 2022-7-15 22:19

四海八荒 发表于 2022-7-15 21:37
看上去，银河好窄的样子

窄点好啊，省得把他们分开了，也可以少来点喜鹊就够了{:4_173:}

红影 发表于 2022-7-15 22:20

小辣椒 发表于 2022-7-15 21:43
亲爱的，这个太浪漫了

谢谢亲爱的，为了学做黑黑的帖子，硬把那一对剪影分开来，然后再让他们汇合{:4_173:}

加林森 发表于 2022-7-15 22:23

好漂亮的制作。大赞！{:4_199:}

红影 发表于 2022-7-15 22:27

加林森 发表于 2022-7-15 22:23
好漂亮的制作。大赞！

谢谢队长鼓励{:4_187:}

加林森 发表于 2022-7-15 22:37

红影 发表于 2022-7-15 22:27
谢谢队长鼓励

这几天太热了，静不下心来。唉！

马黑黑 发表于 2022-7-15 22:41

红影 发表于 2022-7-15 22:18
早知道我多加几头牛了，现在就一只，牛郎自己放就够了

俺还是老老实实放猪吧。放猪下地狱，放牛上天堂。

马黑黑 发表于 2022-7-15 22:41

红影 发表于 2022-7-15 22:17
一年才见一次，这样的浪漫太苦了点。

这样才浪漫

查看完整版本: 牛郎织女（学习黑黑空中散步效果）