论坛 › 欢乐水吧 › 糖葫芦来了

绿叶清舟 发表于 2023-3-10 18:43

糖葫芦来了

<style>
#papa {
      --state: paused;
      margin: -80px 0 0 calc(50% - 633px);
      display: grid;
      place-items: center;
      width: 1100px;
      height: 700px;
      background: lightblue url('https://pic.imgdb.cn/item/6409e72ff144a010071b0384.jpg') no-repeat center/cover;
      box-shadow: 6px 3px 20px #000;
      user-select: none;
      position: relative;
      z-index: 1;
}
#btnFs {
      position: absolute;
      bottom: 20px;
      width: fit-content;
      height: fit-content;
      padding: 6px;
      border-radius: 6px;
      border: 2px solid #c8241b;
      color: #ffff3f;
      text-shadow: 1px 1px 1px #000;
      display: none;
      cursor: pointer;
}
#mplayer {
      position: absolute;
      left: 90%;
      top: 580px;
      width: 50px;
      height: 50px;
      background: hsla(3,87%,78%,.25);
      border-radius: 50%;
      box-shadow:
                0 60px 20px 10px hsla(3,87%,50%,.85),
                0 140px 20px 20px hsla(3,87%,60%,.85),
                0 240px 20px 30px hsla(3,87%,70%,.85),
                0 360px 20px 40px hsla(3,95%,54%,.98),
                0 500px 20px 50px hsla(3,87%,88%,.0);
      transform: rotate(130deg);
      animation: rot 3s ease-in-out infinite alternate var(--state);
      cursor: pointer;
}
#mplayer::before {
      position: absolute;
      content: '';
      left: -20px;
      width: 100px;
      height:580px;
}

@keyframes rot { to { transform: rotate(100deg); } }
</style>

<div id="papa">
      <div id="mplayer"><imgid="mp" style="position: absolute;left: -80px;   top: -130px;" src="https://pic.imgdb.cn/item/6409e93cf144a010071f2765.png" alt="" /></div>
      <div id="btnFs">全屏观赏</div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1485850419.mp3" autoplay loop></audio>
</div>

<script>
(function() {
      let fs = false, timerId;
      let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
      aud.addEventListener('play', () => mState());
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('ended', () => playNext());
      papa.addEventListener('mousemove', (e) => {
                clearTimeout(timerId);
                btnFs.style.display = 'block';
                timerId = setTimeout('btnFs.style.display = "none"', 3000);
      });
      btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
      document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
})();
</script>

阿狄丽娜 发表于 2023-3-10 18:55

我要一个

马黑黑 发表于 2023-3-10 19:08

阿狄丽娜 发表于 2023-3-10 18:55
我要一个

两串给你

马黑黑 发表于 2023-3-10 19:09

牙掉了：俺忘记了这是酸的{:5_107:}

阿狄丽娜 发表于 2023-3-10 19:12

马黑黑 发表于 2023-3-10 19:08
两串给你

嘿嘿！谢谢！

马黑黑 发表于 2023-3-10 19:22

阿狄丽娜 发表于 2023-3-10 19:12
嘿嘿！谢谢！

不阔气

阿狄丽娜 发表于 2023-3-10 19:23

马黑黑 发表于 2023-3-10 19:22
不阔气

我想问一下，你们都在哪里上传图片？

红影 发表于 2023-3-10 19:25

清舟真的弄了糖葫芦呢，这个弄得漂亮{:4_199:}

红影 发表于 2023-3-10 19:25

晶莹透亮，看着就那么好吃{:4_173:}

马黑黑 发表于 2023-3-10 19:26

阿狄丽娜 发表于 2023-3-10 19:23
我想问一下，你们都在哪里上传图片？

图床到处有的。酷美那里也行的。俺人大胆子小，上传到缴费空间。

酷美：https://www.kumeiwp.com/

阿狄丽娜 发表于 2023-3-10 19:28

马黑黑 发表于 2023-3-10 19:26
图床到处有的。酷美那里也行的。俺人大胆子小，上传到缴费空间。

酷美：https://www.kumeiwp.com/

原来如此

马黑黑 发表于 2023-3-10 19:29

阿狄丽娜 发表于 2023-3-10 19:28
原来如此

之前这里上传的图片是可以使用的。估计与空间有关：空间吃紧，钱钱不多。

红影 发表于 2023-3-10 19:31

清舟可以让超出图片的部分不显示的啊。

阿狄丽娜 发表于 2023-3-10 19:31

马黑黑 发表于 2023-3-10 19:29
之前这里上传的图片是可以使用的。估计与空间有关：空间吃紧，钱钱不多。

哎呦！愁的我头发都紫了，那我试试别处存图。

马黑黑 发表于 2023-3-10 19:39

阿狄丽娜 发表于 2023-3-10 19:31
哎呦！愁的我头发都紫了，那我试试别处存图。

{:4_190:}

绿叶清舟 发表于 2023-3-10 20:18

阿狄丽娜 发表于 2023-3-10 19:31
哎呦！愁的我头发都紫了，那我试试别处存图。

https://www.superbed.cn/signup试试这个

绿叶清舟 发表于 2023-3-10 20:18

马黑黑 发表于 2023-3-10 19:09
牙掉了：俺忘记了这是酸的

掉几只了

绿叶清舟 发表于 2023-3-10 20:18

红影 发表于 2023-3-10 19:31
清舟可以让超出图片的部分不显示的啊。

感觉这样也好玩了{:4_189:}

庶民 发表于 2023-3-10 20:22

这个很巧妙，逼真。

梦油 发表于 2023-3-10 20:23

我小时候经常看到这样扛着冰糖葫芦的老人走街串巷吆喝——“葫芦—冰糖的”。

查看完整版本: 糖葫芦来了