小辣椒 发表于 2025-2-14 20:51

爱情里没有谁错谁对 -- 祝情人节快乐！

<style>
      #papa { margin: 130px 0 30px calc(50% - 781px); width: 1400px; height: 710px; background: url('https://xlaj.cn/upfile/2025/02/14/002.jpg') no-repeat center/cover; box-shadow: 3px 3px 8px black; display: grid; place-items: center; position: relative; border-radius:24px;}
      #stage { position: absolute; font-size: 0;width: 350px; height: 480px; left: 200px;top:20px;border-radius: 50%; overflow: hidden; white-space: nowrap; cursor: pointer; }
      #stage img { width: 100%; height: 100%; mask: radial-gradient(red, transparent); }
      #stage img:hover { mask: unset; }
      #btnplay { --state: running; position: absolute; bottom: 30%; width: 30px; height: 30px;left: 38%; color: Crimson; display: grid; place-items: center; cursor: pointer; }
      #btnplay::before { position: absolute; content: ''; width: 100%; height: 100%; border: 2px dashed Black; border-radius: 50%; animation: rot 8s linear infinite var(--state); }
      #btnplay:hover::before { border-style: dotted; }
      @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <div id="stage">
                <img alt="" src="https://xlaj.cn/upfile/2025/02/14/01.jpg" />
                <img alt="" src="https://xlaj.cn/upfile/2025/02/14/02.jpg" />
                <img alt="" src="https://xlaj.cn/upfile/2025/02/14/03.jpg" />
                <img alt="" src="https://xlaj.cn/upfile/2025/02/14/04.jpg" />
                <img alt="" src="https://xlaj.cn/upfile/2025/02/14/05.jpg" />
                <img alt="" src="https://xlaj.cn/upfile/2025/02/14/06.jpg" />
                <img alt="" src="https://xlaj.cn/upfile/2025/02/14/07.jpg" />
                <img alt="" src="https://xlaj.cn/upfile/2025/02/14/08.jpg" />

      </div>
      <div id="btnplay">1</div>
      <audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/20200512/yy/11.mp3" autoplay loop></audio>
</div>

<script>
var lastIdx = 0, pTimer;
var images = stage.querySelectorAll('img');
var mState = () => {
      btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      btnplay.title = stage.title = aud.paused ? '点击播放' : '点击暂停';
      aud.paused ? clearTimeout(pTimer) : turn2();
};
var turn2 = (idx) => {
      idx = Math.floor(Math.random() * images.length);
      if(idx === lastIdx) idx = (idx+1) % images.length;
      lastIdx = idx;
      btnplay.innerText = idx + 1;
      stage.scroll({left: idx * 350, top: 0, behavior: 'smooth'});
      if(pTimer) clearTimeout(pTimer);
      pTimer = setTimeout(turn2, 3000);
};
aud.onpause = aud.onplaying = () => mState();
stage.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

小辣椒 发表于 2025-2-14 20:52

@马黑黑

黑黑你帮我看看我有没有什么错误

小辣椒 发表于 2025-2-14 20:54

学习黑黑 No Happy Endings（scroll版）效果{:4_205:}

小辣椒 发表于 2025-2-14 20:54

祝朋友们情人节快乐~~

梦油 发表于 2025-2-14 21:10

有情人终成眷属。

红影 发表于 2025-2-14 21:32

好有爱的一对对情侣。
借亲爱的好帖同祝各位童靴情人节快乐{:4_187:}

小辣椒 发表于 2025-2-14 21:34

红影 发表于 2025-2-14 21:32
好有爱的一对对情侣。
借亲爱的好帖同祝各位童靴情人节快乐

哈哈，亲爱的，就是以前玩过的情侣装，上去8张图片

小辣椒 发表于 2025-2-14 21:34

梦油 发表于 2025-2-14 21:10
有情人终成眷属。

梦油是最善良的人，我们一起祝福有情人终成眷属

红影 发表于 2025-2-14 22:08

小辣椒 发表于 2025-2-14 21:34
哈哈，亲爱的，就是以前玩过的情侣装，上去8张图片

这些图图很漂亮{:4_187:}

马黑黑 发表于 2025-2-14 22:12

小辣椒 发表于 2025-2-14 20:52
@马黑黑

黑黑你帮我看看我有没有什么错误

#stage { ... } 加入一个属性设置

font-size: 0;

这样图片就无缝衔接了

小辣椒 发表于 2025-2-14 22:58

马黑黑 发表于 2025-2-14 22:12
#stage { ... } 加入一个属性设置

font-size: 0;


改了，现在完美{:4_205:}

小辣椒 发表于 2025-2-14 23:01

红影 发表于 2025-2-14 22:08
这些图图很漂亮

上次是淘宝上找的，发现现在有AI人物了

马黑黑 发表于 2025-2-14 23:32

小辣椒 发表于 2025-2-14 22:58
改了，现在完美

{:4_191:}

庶民 发表于 2025-2-15 08:39

为情人节点赞。

樵歌 发表于 2025-2-15 08:47

简直活学活用的典范！{:4_178:}

樵歌 发表于 2025-2-15 08:48

祝天下小情侣们天天开心幸福美满！

梦油 发表于 2025-2-15 10:19

小辣椒 发表于 2025-2-14 21:34
梦油是最善良的人，我们一起祝福有情人终成眷属

谢谢小辣椒朋友。{:5_108:}

红影 发表于 2025-2-15 15:26

小辣椒 发表于 2025-2-14 23:01
上次是淘宝上找的，发现现在有AI人物了

嗯，AI图图本来就不少呢{:4_187:}

小辣椒 发表于 2025-2-15 16:23

红影 发表于 2025-2-15 15:26
嗯，AI图图本来就不少呢

亲爱的，其实我已经落后了，你看看那些AI视频制作，我都没有去研究过

小辣椒 发表于 2025-2-15 16:23

梦油 发表于 2025-2-15 10:19
谢谢小辣椒朋友。

梦油太客气了
页: [1] 2
查看完整版本: 爱情里没有谁错谁对 -- 祝情人节快乐！