爱情鸟 （学习黑黑老师的No Happy Endings（scroll版纵向翻页））
本帖最后由 梦江南 于 2025-2-16 11:57 编辑 <br /><br /><style>#papa { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 760px; background: url('https://pic1.imgdb.cn/item/67afeaced0e0a243d4ff7adc.png') no-repeat center/cover; box-shadow: 3px 3px 8px black; display: grid; place-items: center; position: relative;border-radius:32px }
#stage { position: absolute; width: 460px; height: 600px; overflow: hidden; cursor: pointer; }
#stage img { width: 100%; height: 100%; float: left; mask: radial-gradient(closest-side, red, red, transparent); }
#stage img:hover { mask: unset; }
#btnplay { --state: running; position: absolute; bottom: 8px;; width: 60px; height: 60px; color: Gold; display: grid; place-items: center; cursor: pointer; }
#btnplay::before { position: absolute; content: ''; width: 100%; height: 100%; border: 3px dashed cyan; 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://pic1.imgdb.cn/item/67b13eebd0e0a243d4ffb88b.png" />
<img alt="" src="https://pic1.imgdb.cn/item/67b13f36d0e0a243d4ffb893.png" />
<img alt="" src="https://pic1.imgdb.cn/item/67b13f9bd0e0a243d4ffb897.png" />
<img alt="" src="https://pic1.imgdb.cn/item/67b13fbcd0e0a243d4ffb899.png" />
<img alt="" src="https://pic1.imgdb.cn/item/67b13ffcd0e0a243d4ffb89f.png" />
<img alt="" src="https://pic1.imgdb.cn/item/67b1401fd0e0a243d4ffb8a1.png" />
</div>
<div id="btnplay">1</div>
<audio id="aud" src="https://cccimg.com/view.php/1ddf137a0fe3643755a61c399cbd68cc.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({top: idx * stage.clientHeight, 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();
papa.scrollIntoView(true);
</script> 画面太温馨了。 这个背景还是前面的那个呢。这些小鸟儿很可爱很温馨。
欣赏江南好帖{:4_199:} 梦油 发表于 2025-2-16 14:27
画面太温馨了。
问好梦油老师，谢谢沙发支持。
鸟儿也有自己的爱情啊！ 红影 发表于 2025-2-16 15:00
这个背景还是前面的那个呢。这些小鸟儿很可爱很温馨。
欣赏江南好帖
问好影子，用了别的背景好像不如这张背景，就又用上了。谢谢支持鼓励。 梦江南 发表于 2025-2-16 15:14
问好影子，用了别的背景好像不如这张背景，就又用上了。谢谢支持鼓励。
嗯嗯，这个制作很漂亮呢{:4_187:} 这么多相亲相爱的鸟太可爱了 红影 发表于 2025-2-16 20:39
嗯嗯，这个制作很漂亮呢
早上问好影子，这张背景图本来想做别的，后来用在这里也蛮好看的。 绿叶清舟 发表于 2025-2-16 21:29
这么多相亲相爱的鸟太可爱了
早上问好清舟，其实鸟儿的爱情有的要比人类忠诚呢。谢谢支持！ 梦江南 发表于 2025-2-17 07:44
早上问好影子，这张背景图本来想做别的，后来用在这里也蛮好看的。
是的，在这样的背景衬托下，那些鸟儿更可爱了{:4_187:} 红影 发表于 2025-2-17 13:22
是的，在这样的背景衬托下，那些鸟儿更可爱了
谢谢影子赞同。{:4_204:} 梦江南 发表于 2025-2-17 15:20
谢谢影子赞同。
不客气啊，问好江南{:4_187:} 梦江南 发表于 2025-2-17 07:47
早上问好清舟，其实鸟儿的爱情有的要比人类忠诚呢。谢谢支持！
江南晚上好，人类的爱情至上论已经把一切都抛脑后了，关于忠诚和其他动物都没法比的 红影 发表于 2025-2-17 19:25
不客气啊，问好江南
早上好，又是新的一天，祝您的平安喜乐！ 绿叶清舟 发表于 2025-2-18 21:12
江南晚上好，人类的爱情至上论已经把一切都抛脑后了，关于忠诚和其他动物都没法比的
是啊，人类的爱情观在变化，动物们却始终没有改变。早上好！ 梦江南 发表于 2025-2-19 08:04
早上好，又是新的一天，祝您的平安喜乐！
谢谢江南的美好祝福{:4_187:} 红影 发表于 2025-2-19 13:27
谢谢江南的美好祝福
下午好，再过几小时就好下班了。 梦江南 发表于 2025-2-19 15:22
下午好，再过几小时就好下班了。
是啊，然后一天又结束了{:4_173:} 红影 发表于 2025-2-19 19:44
是啊，然后一天又结束了
早上好，祝新的一天一切顺利！ 梦江南 发表于 2025-2-20 07:17
早上好，祝新的一天一切顺利！
谢谢江南的美好祝福，把同样美好的祝福送给你{:4_187:}
页:
[1]
2